How to style Lion input components for my brand?

Extend Lion components using Lit's static styles property, as shown in the README example for MyInput. Import the base class, add custom CSS in the styles getter, and define your element. This gives full design control while leveraging Lion's core functionality.

Lion vs Material Web Components for design systems?

Lion is more unopinionated and white-label, ideal for custom branding and extensibility, while Material Web Components offer Google's pre-styled design. Lion requires more upfront styling work but avoids design lock-in.

Can I use Lion with React without wrappers?

You can use Lion Web Components directly in React, but React's event handling and props might need workarounds. The README doesn't provide React-specific guidance, so you'll likely need to create custom integrations or use community solutions.

What browsers does Lion support for accessibility?

Lion targets modern browsers with Web Components support for WCAG 2.2 AA compliance. However, older browsers like Internet Explorer may have limited or no support, so check Lion's documentation for detailed compatibility if legacy support is needed.

How does Lion handle form validation and submission?

Lion includes form-aware components with built-in validation logic that can be extended. You add custom validation rules and styles by subclassing, as per the 'Extend a Web Component' guide, ensuring accessibility and performance are maintained.

Is Lion good for server-side rendered (SSR) apps?

Web Components rely on client-side JavaScript, so Lion isn't optimized for SSR out of the box. You'll need to implement hydration strategies or use tools that support Web Components in SSR contexts, which can add complexity.

Open-Awesome

Lion Web Components

MITJavaScriptprovidence-analytics@0.19.3

A set of highly performant, accessible, and flexible white-label Web Components for building design systems.

Visit Website GitHub

1.9k stars346 forks0 contributors

What is Lion Web Components?

Lion is a library of fundamental white-label Web Components that serve as the building blocks for custom design systems. It provides highly performant, accessible, and flexible components that handle complex UI logic, allowing teams to extend and style them to match their brand. The project solves the problem of repeatedly building robust, accessible components from scratch by offering a tested foundation.

Target Audience

Frontend developers and design system teams building custom, branded component libraries that require strong accessibility and performance. It's particularly suited for organizations that need a white-label base to extend with their own design tokens.

Value Proposition

Developers choose Lion because it provides a production-ready, unopinionated foundation that prioritizes accessibility and performance out of the box. Its white-label approach and extensible architecture allow for complete customization without the overhead of building complex component logic from scratch.

Overview

Fundamental white label web component features for your design system.

Use Cases

Best For

Building a custom design system with a white-label component foundation
Creating accessible UI components that comply with WCAG 2.2 AA standards
Extending base Web Components with custom styles and branding
Developing performant frontend applications using modern ES modules
Teams that need a flexible, unopinionated UI library to build upon
Projects requiring a Lit-based component architecture with strong testing

Not Ideal For

Projects needing fully styled, production-ready components out of the box
Teams using frameworks like React or Vue without Web Components integration plans
Applications requiring server-side rendering with zero client-side JavaScript

Pros & Cons

Pros

High Performance

Focused on great performance in all relevant browsers with minimal dependencies, as explicitly stated in the README's key features.

WCAG 2.2 AA Compliance

Aims for accessibility standards ensuring components are usable by everyone, a core selling point highlighted throughout the documentation.

Flexible Dual API

Offers both Web Components and JavaScript classes, allowing developers to extend or use functionality in its most appropriate form, as detailed in the 'How to use' section.

Modern ES Modules

Distributed as pure ES modules for contemporary development workflows, enabling better tree-shaking and module optimization, per the README.

Cons

Requires Extensive Styling

Components are intentionally unstyled with only functional CSS, demanding significant custom design work for branding, as admitted in the README note about bland demos.

Web Components Integration Complexity

Built on Lit and Web Components, it may require extra effort for seamless use in popular frameworks like React or Vue, which isn't thoroughly addressed in the docs.

Documentation and Migration Issues

The README mentions ongoing Astro migration problems and browser console errors, indicating potential instability or gaps in documentation that could hinder adoption.

Frequently Asked Questions

Related Projects

AMP

The AMP web component framework.

Stars14,911

Forks4,086

Last commit9 days ago

Shoelace

Shoelace is now Web Awesome. Come see what’s new!

Stars13,868

Forks919

Last commit1 month ago

Material Web Components

Material Design Web Components

Stars10,888

Forks1,087

Last commit2 days ago

Wired Elements

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

Stars10,773

Forks336

Last commit2 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub