@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.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

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

60 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