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

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.

Try for free