Documentation

Aria UI provides headless React components for building accessible product interfaces. Start with a component, connect it to your application state, and style its parts with your own CSS or the shared design tokens.

Get started

1. Read the introduction to understand component parts, behavior, and incremental adoption.
2. Install components with the CLI to add editable source to your React project.
3. Browse all components for examples, API references, and keyboard interactions.
4. Set up design tokens to keep colors, spacing, typography, and focus styles consistent.

Find a component for your interface

• Forms and input: Button, Input, Checkbox, Select, and Form.
• Overlays and menus: Dialog, Drawer, Popover, and Dropdown Menu.
• Navigation and structure: Tabs, Accordion, Navigation Menu, and Sidebar.
• Data and feedback: Table, Treeview, Alert, and Toast.

The component reference lists every documented component with a short description.

Build an accessible experience

Read the accessibility guide for semantics, keyboard navigation, and focus management. Component behavior is one part of accessibility: your app still supplies meaningful labels, clear content, contrast, and testing in its final context.

Match your design system

Use the tokens reference to configure semantic variables. Open the theme editor to explore colors, typography, radius, and light and dark themes.