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

@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
Lion
Fundamental white label web components for building your design system.
Features
- 25+ components
See Design System example
@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
See Design System example
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

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.

Best Web Components libraries for Design Systems #