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

    Screenshot of @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

    Screenshot of Lion

    Fundamental white label web components for building your design system.

    Features

    • 25+ components
    See Design System example
  • @microsoft/fast-components

    Screenshot of @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

    Screenshot of Shoelace

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

    Features

    • 40+ components
  • Spectrum Web Components

    Screenshot of Spectrum Web Components

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

    Features

    • 40+ components