Composable behavior
Assemble overlays, fields, navigation, and structured views from small parts with predictable contracts.
Accessible React primitives for building production grade interfaces.
Build reliable components from one headless behavior layer, then style every surface with local design tokens that match your product system.
Payment Method
All transactions are secure and encrypted
Billing Address
The billing address associated with your payment method
KE
AR
UI
No Team Members
Invite your team to collaborate on this project.
Syncing
Updating
Loading
Auto
52% used
Two-factor authentication
Verify via email or phone number.
Your profile has been verified.
Profile verification is complete.
Appearance Settings
Compute Environment
Select the compute environment for your cluster.
@
Auto
How did you hear about us?
Select the option that best describes how you heard about us.
Processing your request
Please wait while we process your request.
Features
Build accessible interfaces without rebuilding behavior
Aria UI gives product teams a stable behavior layer for common interaction patterns while keeping every visual decision in your local token system.
Controlled when needed
Start with default state, then take over value, open state, or selection when your product flow needs it.
Token-aligned surfaces
Keep color, spacing, radii, shadows, and typography mapped to the local @ariaui/tokens contract.
ARIA patterns built in
Rely on keyboard behavior, roles, focus management, and state attributes that mirror WAI-ARIA patterns.
Fewer dependencies
Keep adoption lightweight with React-centered packages and shared Aria UI utilities instead of extra framework requirements.
Tailwind and React ready
Use the primitives with Tailwind CSS v4, React 19, and your existing application composition model.
Compose, style, and verify in code.
Work from explicit parts, local tokens, and interaction checks:
import * as Calendar from '@ariaui/calendar'export default function Example() { return ( <Calendar.Root> <Calendar.Header> <Calendar.HeaderPrevious /> <Calendar.HeaderMonth /> <Calendar.HeaderYear /> <Calendar.HeaderNext /> </Calendar.Header> <Calendar.Body> <Calendar.Head> <Calendar.Row> <Calendar.DayHeader /> </Calendar.Row> </Calendar.Head> <Calendar.Rows> <Calendar.Row> <Calendar.Cell /> </Calendar.Row> </Calendar.Rows> </Calendar.Body> </Calendar.Root> )}Component gallery
Browse the component gallery
Open focused docs from generated thumbnails of the primitives your product can compose.
AccordionAlert DialogAlertAspect RatioAvatarBadgeBreadcrumbButton GroupButtonCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDrawerDropdown MenuEmptyFieldFormHover CardInput OTPInput GroupInputItemKBDLabelMenubarNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToggle GroupToggleTooltip
FAQ section
Frequently asked questions
We have compiled the most important details to help you evaluate Aria UI.
General
Is Aria UI free to use?
Yes. The primitives are developed in this repository and can be installed from the workspace packages.
Can I style every primitive myself?
Yes. Aria UI owns behavior and state contracts while your application owns the visual layer.
Does Aria UI depend on a specific theme?
No. The docs use local design tokens, but the primitives are headless and can fit your own token system.
What should I read first?
Start with the introduction, then open a component page and compare the live preview with the source.
Implementation
Can I use one primitive at a time?
Yes. Each package is designed for focused adoption, so teams can start with a single behavior surface.
Can I use Aria UI with Tailwind CSS?
Yes. The docs use Tailwind CSS v4 and design tokens, but the primitives themselves stay headless.
Are the components controlled or uncontrolled?
Many primitives support both patterns so simple cases stay concise and advanced flows can be orchestrated.
Where should support questions go?
Open the docs first, then use the project repository when a package behavior needs discussion or a fix.