React Spectrum - NFHN Reader

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.

Recents

Placeholder titleThis is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.

Recents

Placeholder titleThis is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.

Touch friendly

Components automatically scale and adapt for touch or pointer input, ensuring a smooth experience on any device.

Subscribe to our newsletter

Global ready by default

Components automatically mirror their layout and format text for different languages, currencies, dates, and locales.

مؤخرًا

Placeholder titleThis is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.

Reduce motion options

Component animations and transitions automatically adjust for users who prefer less motion, keeping your UI comfortable and inclusive.

Reduce motion

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'})

Nikolas Gibbons

style({font: 'title-sm'})

2 hours ago

style({font: 'detail-sm'})

Thanks for the feedback!

style({font: 'body'})

Adriana SullivanJuly 14Transitions are smooth! Could we speed them up just a bit?

Frank WhitakerJuly 13Love the direction. Could we simplify the header a bit more?

Object styles

Apply Spectrum’s foundational design principles using object-style tokens.

Background

Border Radius

Box Shadow

Border Width

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.

Build Once. Adapt Everywhere.

Dark mode

Touch friendly

Global ready by default

Reduce motion options

High contrast mode

Adaptive font sizes

Everything you need to build beautiful apps.

Icons

Illustrations

Rapidly style custom components with Style Macros.

Colors

Typography

Comments

Object styles

States and variants

Reusable utilities

Button.tsx

style-utils.ts

Responsive design

Built for modern development and the modern web.

AI-ready

SSR

Small bundle

Ready to get started?