Build beautiful
interfaces, faster.

A per-component headless UI library for React and Astro. Ship accessible, themeable interfaces with zero lock-in.

389 packages9,000+ tests passingWCAG AA compliant
Browse ComponentsView Examples
$ pnpm add @refraction-ui/react

Why Refraction UI

Everything you need to build production-grade interfaces.

Headless Core

Framework-agnostic state machines, ARIA, and keyboard handling. Zero DOM, zero CSS.

One Package per Framework

Install a single meta package and get every component — one dependency, one version, zero drift.

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 121 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

# Add the Tailwind preset
pnpm add -D @refraction-ui/tailwind-config