React Spectrum S2 (Spectrum 2)

React Spectrum S2 is Adobe's implementation of the Spectrum 2 design system in React. It provides a collection of accessible, adaptive, and high-quality UI components.

If the requirements do not clearly specify which React Spectrum component to use, consult the Component Decision Tree before choosing a component.

Styling

Use React Spectrum S2 components and the S2 style macro as the default styling approach.

• Import the style macro using the {type: 'macro'} import attribute: import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
• Remember that the style macro runs at build time and returns class names.
• Avoid introducing Tailwind, radix-ui, shadcn/ui, or any other third-party design system components in S2 implementations.
• Prefer S2 components first, and use their styles prop only for the supported layout-style properties.
• For generic layouts (flex, grid, etc.), use native HTML elements with the style macro.
• For card-style layouts, use the S2 Card component instead of building something custom.
• IMPORTANT: Avoid using the UNSAFE_style and UNSAFE_className props.

For React Spectrum components, the styles prop is intentionally limited. Supported properties are: