React Aria, ported to Leptos
Accessible by default.
Styled by you.
leptos_aria brings React Aria's keyboard, focus, and screen-reader
behaviour to Leptos and ships zero CSS. Every state is a
data-* attribute, so Tailwind v4 styles it with the classes you already write.
cargo add leptos_aria
<button
role="switch"
aria-checked="false"
data-state="unchecked">Three moves, no stylesheet to fight
-
Add the crate
One facade crate re-exports every component, hook, and utility.
$ cargo add leptos_aria -
Compose the parts
Components handle roles, keyboard, and focus. You write markup and classes.
view! { <AccordionItem key="faq".to_string()> <AccordionTrigger class="data-[state=open]:font-bold"> "Is it accessible?" </AccordionTrigger> <AccordionPanel>"By default."</AccordionPanel> </AccordionItem> } -
Style the state
Name the states once and every component speaks the same variants.
@custom-variant open (&:where([data-state="open"])); <button class="open:bg-orange-500">
The hard parts, already written
-
Press, hover, and focus that agree
Mouse, touch, pen, keyboard, and screen-reader virtual clicks all arrive as one normalised press event.
-
Focus goes where it should
Containment inside modals, restoration on close, autofocus, and a programmatic
FocusManager. -
Overlays that close properly
Escape and outside-press dismissal, scroll locking, and popovers that flip and shift to stay on screen.
-
Collections you can drive by keyboard
Arrow keys, Home and End, and type-ahead across list boxes, menus, grids, tables, and trees.
-
Calendar and colour maths
Date arithmetic, ranges, and time fields, plus colour areas, sliders, and wheels that read correctly aloud.
-
Copy, don't install
A shadcn-style CLI drops styled wrappers into your crate. The files are yours to edit.
63 components, 15 interaction hooks
Install Tailwind-styled versions with one command from the component registry.
- Buttons & toggles
- Button · AnchorButton · CustomButton · ToggleButton · ToggleGroup · Switch
- Forms & fields
- Form · TextField · TextArea · SearchField · NumberField · OneTimePasswordField · Checkbox · CheckboxGroup · RadioGroup · Slider
- Collections & menus
- ComboBox · SelectBox · ListBox · Menu · MenuTrigger · ContextMenu · Menubar · Tabs · TagGroup · Toolbar · Grid · Table · Tree
- Overlays
- Tooltip · Popover · Modal · Dialog · AlertDialog · HoverCard · Toast
- Date & time
- Calendar · DatePicker · DateField · DateRangePicker · TimeField
- Colour
- ColorField · ColorArea · ColorSlider · ColorWheel · ColorSwatch
- Navigation & layout
- Link · Breadcrumb · Pagination · Disclosure · Accordion · ScrollArea · Separator · AspectRatio
- Feedback & files
- Meter · ProgressBar · Avatar · DropZone · DraggableItem · FileTrigger
- Text
- Heading · Text · VisuallyHidden
- Interaction hooks
- use_press · use_focus · use_focus_within · use_hover · use_focusable · use_focus_ring · use_keyboard · use_long_press · use_move · use_drag · use_drop · use_scroll · use_overlay_dismiss · use_modal · use_autofocus · FocusManager
Own the styled layer
Like shadcn/ui: the CLI copies Tailwind-styled components into
src/components/ui, wires up the modules and theme, and the files become yours.
The headless crates stay underneath. Browse the components or
read the CLI guide.
# once
$ cargo install leptos_aria_cli
$ leptos-aria init
# per component, and again after upgrades
$ leptos-aria add button dialog switch
$ leptos-aria diff