Spectrum Web Components

The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system. It's designed to work with any web framework — or even without one.

View on GitHub

Accessible by default #

Developed with existing and emerging browser specifications in mind, our components deliver a high quality experience whether using a screen reader, keyboard navigation, and/or customized contrast.

Light weight #

Spectrum Web Components are implemented using the LitElement base class. LitElement is designed for creating web components with a minimum amount of overhead.

Standards based #

Web Components are a set of technologies that work together, letting you create custom elements that work just like the standard HTML elements built into your browser.

Framework agnostic #

You can use web components with any framework, since they’re supported and encapsulated at the browser level.

Sample element usage #

<sp-button variant="accent" href="components/button">
    Use Spectrum Web Component buttons
</sp-button>