@oui

React Aria Components styled with shadcn UI characteristics, designed to run side-by-side with existing shadcn installs without overwriting any shadcn files. Covers 50+ components: Alert, Autocomplete, Badge, Base, Button, Button Group, Calendar, Card, Checkbox, Checkbox Group, Combo Box, Date Field, Date Picker, Dialog, Disclosure, Field, Form, Input, Input Group, Keyboard, Label, Link, List Box, Menu, Modal, Number Field, Pagination, Popover, Radio Group, React Router bindings, Search Field, Select, Separator, Sheet, Sidebar, Slider, Switch, Table, Tabs, Text Area, Text Field, Toggle Button, Toggle Button Group, and Tooltip. Adds accessibility and ARIA compliance beyond Radix-based alternatives. Free. Use for: projects needing ARIA-first accessible components with shadcn visual styling, especially where WAI-ARIA compliance is a hard requirement.

137 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://oui.mw10013.workers.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://oui.mw10013.workers.dev/r/registry.json

bun bunx shadcn@latest add https://oui.mw10013.workers.dev/r/registry.json

fetch registry curl -s https://oui.mw10013.workers.dev/r/registry.json

Components

137 total

Alert ui

A shadcn Alert for a form displaying form action result.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-alert.json

oui-alert-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-alert-demo.json

oui-autocomplete-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-autocomplete-demo.json

oui-autocomplete-demo-avatar component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-autocomplete-demo-avatar.json

oui-autocomplete-demo-searchable component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-autocomplete-demo-searchable.json

Badge ui

A className function to style a react aria component as a shadcn Badge

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-badge.json

oui-badge-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-badge-demo.json

Base ui

Base styles and utilities for Oui.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-base.json

Button ui

React aria components Button with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button.json

oui-button-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo.json

oui-button-demo-outline component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-outline.json

oui-button-demo-destructive component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-destructive.json

oui-button-demo-disabled component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-disabled.json

oui-button-demo-disabled-animation component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-disabled-animation.json

oui-button-demo-ghost component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-ghost.json

oui-button-demo-icon-left component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-icon-left.json

oui-button-demo-icon-right component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-icon-right.json

oui-button-demo-lg component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-lg.json

oui-button-demo-link component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-link.json

oui-button-demo-secondary component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-secondary.json

oui-button-demo-sm component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-demo-sm.json

Button Group ui

Shadcn Button Group with react aria component characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-group.json

oui-button-group-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-button-group-demo.json

Calendar ui

React aria components Calendar with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-calendar.json

oui-calendar-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-calendar-demo.json

Card ui

CardGridListItem for shadcn Card.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-card.json

Checkbox ui

React aria components Checkbox with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox.json

oui-checkbox-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox-demo.json

oui-checkbox-demo-blue component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox-demo-blue.json

Checkbox Group ui

React aria components Checkbox Group with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox-group.json

oui-checkbox-group-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox-group-demo.json

oui-checkbox-group-demo-invalid component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-checkbox-group-demo-invalid.json

Combo Box ui

React aria components Combo Box with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-combo-box.json

oui-combo-box-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-combo-box-demo.json

oui-combo-box-demo-avatar component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-combo-box-demo-avatar.json

oui-combo-box-demo-header component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-combo-box-demo-header.json

Date Field ui

React aria components DateField with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-date-field.json

oui-date-field-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-date-field-demo.json

Date Picker ui

React aria components DatePicker with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-date-picker.json

oui-date-picker-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-date-picker-demo.json

Dialog ui

React aria components Dialog with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog.json

oui-dialog-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog-demo.json

oui-dialog-demo-scrollable-content component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog-demo-scrollable-content.json

oui-dialog-demo-sticky-footer component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog-demo-sticky-footer.json

oui-dialog-demo-alert component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog-demo-alert.json

oui-dialog-demo-alert-confirm component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-dialog-demo-alert-confirm.json

Disclosure ui

React aria components Disclosure with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-disclosure.json

oui-disclosure-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-disclosure-demo.json

oui-disclosure-demo-group component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-disclosure-demo-group.json

oui-disclosure-demo-text component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-disclosure-demo-text.json

Field ui

Shadcn Field with react aria components characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-field.json

oui-field-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-field-demo.json

oui-field-demo-fieldset component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-field-demo-fieldset.json

oui-form-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-form-demo.json

Oui Index ui

All oui ui components.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-index.json

Oui React Router Index component

All react router related components and extensions.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-react-router-index.json

Input ui

React aria components Input with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input.json

oui-input-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input-demo.json

oui-input-demo-password component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input-demo-password.json

oui-input-demo-disabled component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input-demo-disabled.json

Input Group ui

React aria components Group with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input-group.json

oui-input-group-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-input-group-demo.json

Keyboard ui

React aria components Keyboard with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-keyboard.json

oui-keyboard-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-keyboard-demo.json

Label ui

React aria components Label with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-label.json

oui-label-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-label-demo.json

oui-label-demo-disabled component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-label-demo-disabled.json

Link ui

React aria components Link with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link.json

oui-link-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo.json

oui-link-demo-hover component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-hover.json

oui-link-demo-always component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-always.json

oui-link-demo-current component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-current.json

oui-link-demo-focus component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-focus.json

oui-link-demo-disabled component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-disabled.json

oui-link-demo-button component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-button.json

oui-link-demo-button-outline component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-button-outline.json

oui-link-demo-button-destructive component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-button-destructive.json

oui-link-demo-button-disabled component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-button-disabled.json

oui-link-demo-icon component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-icon.json

oui-link-demo-login component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-link-demo-login.json

List Box ui

React aria components List Box with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-list-box.json

oui-list-box-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-list-box-demo.json

oui-list-box-demo-multiple component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-list-box-demo-multiple.json

Menu ui

React aria components Menu with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu.json

oui-menu-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo.json

oui-menu-demo-checkboxes component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo-checkboxes.json

oui-menu-demo-radio-group component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo-radio-group.json

oui-menu-demo-avatar component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo-avatar.json

oui-menu-demo-avatar-only component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo-avatar-only.json

oui-menu-demo-icon component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-menu-demo-icon.json

Modal ui

React aria components Modal with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-modal.json

Number Field ui

React aria components Number Field with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-number-field.json

oui-number-field-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-number-field-demo.json

Pagination ui

React aria components List Box with shadcn characteristics for pagination.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-pagination.json

oui-pagination-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-pagination-demo.json

Popover ui

React aria components Popover with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-popover.json

oui-popover-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-popover-demo.json

Radio Group ui

React aria components Radio Group with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-radio-group.json

oui-radio-group-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-radio-group-demo.json

oui-radio-group-demo-green component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-radio-group-demo-green.json

React Router Error Boundary component

Error Boundary for react router.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-react-router-error-boundary.json

React Router Provider component

React aria components Router Provider for react router.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-react-router-provider.json

oui-react-router-theme-toggle-button component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-react-router-theme-toggle-button.json

Search Field ui

React aria components Search Field with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-search-field.json

oui-search-field-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-search-field-demo.json

Select ui

React aria components Select with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-select.json

oui-select-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-select-demo.json

oui-select-demo-multiple component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-select-demo-multiple.json

oui-select-demo-large-list component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-select-demo-large-list.json

oui-select-demo-icon component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-select-demo-icon.json

Separator ui

React aria components Separator with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-separator.json

oui-separator-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-separator-demo.json

Sheet ui

A className function to style a react aria components Modal as a shadcn Sheet.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-sheet.json

oui-sheet-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-sheet-demo.json

oui-sheet-demo-sides component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-sheet-demo-sides.json

Sidebar ui

Sidebar Trigger, Sidebar Tree, and Sidebar Button for shadcn Sidebar.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-sidebar.json

Slider ui

React aria components Slider with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-slider.json

oui-slider-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-slider-demo.json

Switch ui

React aria components Switch with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-switch.json

oui-switch-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-switch-demo.json

Table ui

React aria components Table with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-table.json

oui-table-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-table-demo.json

oui-table-demo-action-menu component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-table-demo-action-menu.json

Tabs ui

React aria components Tabs with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-tabs.json

oui-tabs-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-tabs-demo.json

Text Area ui

React aria components Text Area with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-text-area.json

oui-text-area-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-text-area-demo.json

Text Field ui

React aria components Text Field with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-text-field.json

oui-text-field-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-text-field-demo.json

oui-text-field-demo-invalid component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-text-field-demo-invalid.json

Toggle Button ui

React aria components Toggle Button with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-toggle-button.json

oui-toggle-button-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-toggle-button-demo.json

Toggle Button Group ui

React aria components Toggle Button Group with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-toggle-button-group.json

oui-toggle-button-group-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-toggle-button-group-demo.json

Tooltip ui

React aria components Tooltip with shadcn characteristics.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-tooltip.json

oui-tooltip-demo component

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-tooltip-demo.json

On Submit React Router lib

Helper function to handle form submissions with react router.

npx shadcn@latest add https://oui.mw10013.workers.dev/r/oui-on-submit-react-router.json