Build beautiful
interfaces, faster.
A per-component headless UI library for React, Angular, and Astro. Ship accessible, themeable interfaces with zero lock-in.
89 packages2,691 tests passingWCAG AA compliant
$ pnpm add @refraction-ui/reactWhy Refraction UI
Everything you need to build production-grade interfaces.
Headless Core
Framework-agnostic state machines, ARIA, and keyboard handling. Zero DOM, zero CSS.
Per-Component Packages
Install only what you need. Each component is its own package with zero cross-dependencies.
Full Brand Theming
CSS custom properties with dark mode, presets, and WCAG contrast validation built in.
Accessible by Default
Every component meets WCAG AA out of the box. Focus management, ARIA, and keyboard navigation.
Component Catalog
Browse all 49 components with live examples, variant grids, and copy-paste code.
Theme Playground
Customize colors, preview components live, and export your CSS theme variables.
Quick Start
Get up and running in under a minute.
Terminal
# Install the meta package (all components)
pnpm add @refraction-ui/react
# Or install individual components
pnpm add @refraction-ui/react-button @refraction-ui/react-dialog
# Add the Tailwind preset
pnpm add -D @refraction-ui/tailwind-config