Best Web Components Libraries for Design Systems

  • 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

  • Low level - Set of building blocks
  • 20+ components

Lion

Fundamental white label web components for building your design system.

Features

  • Medium level - Unstyled components
  • 25+ components

@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

  • High level - Tokens and pre-styled components
  • 20+ components

Shoelace

Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology.

Features

  • High level - Tokens and pre-styled components
  • 40+ components

Spectrum Web Components

The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system.

Features

  • High level - Tokens and pre-styled components
  • 40+ components