Dev Design Library

OUI components

React Aria Components with Shadcn characteristics.

Components
40
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
7
Source
https://github.com/mw10013/oui
Website
https://oui.mw10013.workers.dev
Install
npx shadcn@latest add @oui/{name}

All OUI components

  • Alert: A shadcn Alert for a form displaying form action result.
  • Badge: A className function to style a react aria component as a shadcn Badge
  • Button: React aria components Button with shadcn characteristics.
  • Button Group: Shadcn Button Group with react aria component characteristics.
  • Calendar: React aria components Calendar with shadcn characteristics.
  • Card: CardGridListItem for shadcn Card.
  • Checkbox: React aria components Checkbox with shadcn characteristics.
  • Checkbox Group: React aria components Checkbox Group with shadcn characteristics.
  • Combo Box: React aria components Combo Box with shadcn characteristics.
  • Date Field: React aria components DateField with shadcn characteristics.
  • Date Picker: React aria components DatePicker with shadcn characteristics.
  • Dialog: React aria components Dialog with shadcn characteristics.
  • Disclosure: React aria components Disclosure with shadcn characteristics.
  • Field: Shadcn Field with react aria components characteristics.
  • Input: React aria components Input with shadcn characteristics.
  • Input Group: React aria components Group with shadcn characteristics.
  • Keyboard: React aria components Keyboard with shadcn characteristics.
  • Label: React aria components Label with shadcn characteristics.
  • Link: React aria components Link with shadcn characteristics.
  • List Box: React aria components List Box with shadcn characteristics.
  • Menu: React aria components Menu with shadcn characteristics.
  • Modal: React aria components Modal with shadcn characteristics.
  • Number Field: React aria components Number Field with shadcn characteristics.
  • Pagination: React aria components List Box with shadcn characteristics for pagination.
  • Popover: React aria components Popover with shadcn characteristics.
  • Radio Group: React aria components Radio Group with shadcn characteristics.
  • Search Field: React aria components Search Field with shadcn characteristics.
  • Select: React aria components Select with shadcn characteristics.
  • Separator: React aria components Separator with shadcn characteristics.
  • Sheet: A className function to style a react aria components Modal as a shadcn Sheet.
  • Sidebar: Sidebar Trigger, Sidebar Tree, and Sidebar Button for shadcn Sidebar.
  • Slider: React aria components Slider with shadcn characteristics.
  • Switch: React aria components Switch with shadcn characteristics.
  • Table: React aria components Table with shadcn characteristics.
  • Tabs: React aria components Tabs with shadcn characteristics.
  • Text Area: React aria components Text Area with shadcn characteristics.
  • Text Field: React aria components Text Field with shadcn characteristics.
  • Toggle Button: React aria components Toggle Button with shadcn characteristics.
  • Toggle Button Group: React aria components Toggle Button Group with shadcn characteristics.
  • Tooltip: React aria components Tooltip with shadcn characteristics.

Browse by category