Best Web Components libraries for Design Systems
The component libraries on this list are accessible and can be styled to match your brand and your design tokens.
| Accessibility mandatory | |
| Customisable style |
Composition primitives
These libraries are the lowest level you can get. It's lower than unstyled components. You compose primitive to build the component you need. The best example for Web Components is fast-foundation that provides composable primitives to create accessible components.
@microsoft/fast-foundation
`fast-foundation` provides foundational building blocks that can be assembled to create new design tokens and component libraries. It's a lower-level abstraction compared to `fast-components`.
Features
- 20+ components
Unstyled components
These component libraries bring unstyled components. You bring your own tokens structure and apply your styling on top of the pre-build components.
Fully styled components
These component libraries are fully styled components ready-to-use. Most of them have a sophisticated theming systems with more or less design token granularity. Get the library you like, tune the styling through their theming system and go.
@microsoft/fast-components
`fast-components`, also called "FAST Frame", provides a common set of components that can be customized using FAST design tokens knobs. It's composed with `fast-foundation`.
Features
- 20+ components
Shoelace
Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology.
Features
- 40+ components
Spectrum Web Components
The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system.
Features
- 40+ components