Spectrum Web Components
Adobe's design system as framework-agnostic custom elements.
Spectrum Web Components is Adobe's design system delivered as standard custom elements. Same design language as React Spectrum, but as sp-* elements that work in any framework or in plain HTML.
At a glance
| Install | per package, e.g. npm install @spectrum-web-components/button |
| Standard | native custom elements, framework agnostic |
| Element prefix | sp- |
| Spectrum version | Spectrum 1 |
| Licence | Apache-2.0 |
| MCP server | not published, llms.txt available |
What the markup looks like
<sp-theme system="spectrum" color="dark" scale="medium">
<sp-button variant="accent">Save changes</sp-button>
<sp-dialog-wrapper headline="Rename project"></sp-dialog-wrapper>
</sp-theme>
The accessibility lineage is the argument
Adobe maintains React Aria, which is the most rigorous accessibility layer in the React ecosystem. Spectrum Web Components comes from the same organisation and the same standards work, applied to custom elements instead. Very little else in the web components space carries that pedigree.
Mind the Spectrum version
The library documents itself as Spectrum 1. Adobe has been rolling out a newer Spectrum design language across its products, so check which generation you are adopting before committing a long-lived product to the visual language.
Choose it if
- You want Adobe-grade accessibility without React.
- You need components that survive a framework change.
- You are building tooling that sits alongside Adobe products.
Look elsewhere if
- You are in React. React Spectrum and React Aria are the direct path.
- You need a neutral visual base. Spectrum is a strong identity.
