Developer overview

I work on a web-based product. How will I integrate Spectrum into my application?

Spectrum is readily available for web-based products. There are two primary implementations of Spectrum for web: React Spectrum (RSP) and Spectrum Web Components (SWC). Both of these implementations currently support the latest Spectrum using current best-practice for web development.

React Spectrum (RSP)

React Spectrum is now has over 70 components matching the latest Spectrum designs that production-ready and available in the new @react-spectrum/s2 package.

The current version of React Spectrum supports both new projects and those based on the older React Spectrum v3, with the ability to migrate portions of an application independently. Migration support is available through the upgrade migration tool as well as documentation on the RSP website. See our guides to learn how to use Spectrum tokens via the style macros and ways to build using AI agents.

React Spectrum components are built on React Aria Components and Spectrum Design Data, and will continue to be added or updated new Spectrum designs become available. For a full list of currently available components, see the Status section of the React Spectrum page.

Spectrum Web Components (SWC)

Spectrum Web Components is migrating our older components to "Generation 2" architecture, which includes full Spectrum fidelity, along with many other improvements to the library. Gen1 components ship as versions 1.x, and Gen2 components ship as versions starting at 2.x, making the package version the simplest way to know which generation you're on.

The migration strategy

• A core principle is that Gen1 and Gen2 components can coexist, so the migration strategy is flexible to meet each team's needs.
• SWC's first step toward full-fidelity Spectrum was called "Spectrum 2 Foundations" and is currently available for all Gen1 components. This theme updates the colors, corner radii, and icons of its components to provide the updated Spectrum look and feel, while supporting backward compatibility with legacy Spectrum and Express themes. This allowed teams to move closer to current Spectrum without introducing breaking changes.
• Gen2 is the next step in the migration path. These components are being rebuilt from the ground up to be more stable and flexible, and to fully match current Spectrum designs. While these components have some breaking changes, they fully match Spectrum's design intent.