Build Once. Adapt Everywhere.
React Spectrum makes interfaces more accessible, flexible, and maintainable, giving users a seamless experience no matter where they are.
Dark mode
Deliver effortless light and dark mode support with no extra styling needed.
Touch friendly
Components automatically scale and adapt for touch or pointer input, ensuring a smooth experience on any device.
Global ready by default
Components automatically mirror their layout and format text for different languages, currencies, dates, and locales.
Reduce motion options
Component animations and transitions automatically adjust for users who prefer less motion, keeping your UI comfortable and inclusive.
High contrast mode
Support for high contrast mode is included, ensuring a clear and readable experience based on preference.
- Your files
- July final draft
Adaptive font sizes
Fonts scale automatically according to user preferences and screen size using rem-based typography, allowing your text to scale naturally.
- Your files
- July final draft
Everything you need to build beautiful apps.
Bring your interface to life with expressive icons, Spectrum colors, and rich illustrations. Every detail works together to make your product look polished and on-brand.
Icons
With hundreds of Spectrum icons to choose from, use our icon search to find the right icon for the right experience.
Illustrations
Rich illustrations help bring your interface to life. Use our illustration search to find the right illustration for your product.
Rapidly style custom components with Style Macros.
Easily use Spectrum tokens like colors, spacing, and typography in your own custom components with style macros. Styles are colocated with your component code, allowing you to develop more efficiently and refactor with confidence – no more CSS conflicts or specificity issues. Style macros generate atomic CSS at build time, so you get tiny bundle sizes and fast runtime performance.
Colors
Convenient access to the full range of Spectrum color tokens.
style({color: 'red-400'})Typography
Use the predefined type styles to draw attention and create consistent hierarchy.
Comments
style({font: 'title-lg'})
style({font: 'title-sm'})2 hours ago
style({font: 'detail-sm'})Thanks for the feedback!
style({font: 'body'})
Object styles
Apply Spectrum’s foundational design principles using object-style tokens.
style({
backgroundColor: 'elevated',
borderRadius: 'default',
boxShadow: 'elevated'
})States and variants
Define the states for your custom components all in one place using Spectrum tokens.
<Button
className={states => style({
backgroundColor: {
default: {
variant: {
accent: {
default: 'accent-900',
isHovered: 'accent-1000',
isPressed: 'accent-1100'
},
negative: {
default: 'negative-900',
isHovered: 'negative-1000',
isPressed: 'negative-1100'
}
},
isDisabled: 'gray-100'
}
}
})({...states, variant})}>
Action
</Button>Reusable utilities
Use macros to create reusable style utilities for your own components.
Button.tsx
import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
import {hstack} from './style-utils' with {type: 'macro'};
const buttonStyle = style({
...focusRing(),
...hstack(4)
});
style-utils.ts
export function hstack(gap: number) {
return {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap
};
}
Responsive design
Adapt your application for any screen size using our built-in breakpoints, or define your own.
Built for modern development and the modern web.
With AI-ready documentation, server side and runtime performance optimizations, React Spectrum helps you build modern, scalable apps without compromise.
AI-ready
Comprehensive markdown docs, llms.txt, and an agent-friendly MCP server.
SSR
Server-side rendering and React Server Components support maximize Core Web Vitals.
Small bundle
Aggressive tree-shaking and atomic CSS produce smaller bundles and faster runtime performance.
