Also in the oui registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Alert

oui-alert

A shadcn Alert for a form displaying form action result.

react-aria-components1 file1 example

Badge

oui-badge

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

1 file1 example

Base

oui-base

Base styles and utilities for Oui.

react-aria-components, tailwind-merge1 file

Button

oui-button

React aria components Button with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file33 examples

Button Group

oui-button-group

Shadcn Button Group with react aria component characteristics.

react-aria-components, class-variance-authority1 file1 example

Calendar

oui-calendar

React aria components Calendar with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file1 example

Card

oui-card

CardGridListItem for shadcn Card.

1 file

Checkbox

oui-checkbox

React aria components Checkbox with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file2 examples

Checkbox Group

oui-checkbox-group

React aria components Checkbox Group with shadcn characteristics.

react-aria-components1 file2 examples

Combo Box

oui-combo-box

React aria components Combo Box with shadcn characteristics.

react-aria-components1 file1 example

Date Field

oui-date-field

React aria components DateField with shadcn characteristics.

react-aria-components, @internationalized/date1 file1 example

Date Picker

oui-date-picker

React aria components DatePicker with shadcn characteristics.

lucide-react1 file1 example

Dialog

oui-dialog

React aria components Dialog with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file1 example

Disclosure

oui-disclosure

React aria components Disclosure with shadcn characteristics.

react-aria-components, lucide-react1 file3 examples

Field

oui-field

Shadcn Field with react aria components characteristics.

react-aria-components1 file7 examples

Oui Index

oui-index

All oui ui components.

1 file

Input

oui-input

React aria components Input with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file5 examples

Input Group

oui-input-group

React aria components Group with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file1 example

Keyboard

oui-keyboard

React aria components Keyboard with shadcn characteristics.

react-aria-components, tailwind-merge1 file1 example

Label

oui-label

React aria components Label with shadcn characteristics.

react-aria-components, tailwind-merge1 file1 example

Link

oui-link

React aria components Link with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file6 examples

List Box

oui-list-box

React aria components List Box with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file3 examples

Modal

oui-modal

React aria components Modal with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file

Number Field

oui-number-field

React aria components Number Field with shadcn characteristics.

react-aria-components, lucide-react1 file1 example

Pagination

oui-pagination

React aria components List Box with shadcn characteristics for pagination.

react-aria-components, tailwind-merge1 file1 example

Popover

oui-popover

React aria components Popover with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file1 example

Radio Group

oui-radio-group

React aria components Radio Group with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file1 example

React Router Error Boundary

oui-react-router-error-boundary

Error Boundary for react router.

card1 file

Oui React Router Index

oui-react-router-index

All react router related components and extensions.

1 file

React Router Provider

oui-react-router-provider

React aria components Router Provider for react router.

1 file

oui-react-router-theme-toggle-button

remix-themes1 file

Search Field

oui-search-field

React aria components Search Field with shadcn characteristics.

react-aria-components1 file1 example

Select

oui-select

React aria components Select with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file1 example

Separator

oui-separator

React aria components Separator with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file1 example

Sheet

oui-sheet

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

react-aria-components, class-variance-authority1 file1 example

Sidebar

oui-sidebar

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

lucide-react1 file

Slider

oui-slider

React aria components Slider with shadcn characteristics.

react-aria-components1 file1 example

Switch

oui-switch

React aria components Switch with shadcn characteristics.

react-aria-components, tailwind-merge1 file1 example

Table

oui-table

React aria components Table with shadcn characteristics.

react-aria-components, lucide-react, tailwind-merge1 file1 example

Tabs

oui-tabs

React aria components Tabs with shadcn characteristics.

react-aria-components1 file1 example

Text Area

oui-text-area

React aria components Text Area with shadcn characteristics.

react-aria-components1 file1 example

Text Field

oui-text-field

React aria components Text Field with shadcn characteristics.

react-aria-components1 file1 example

Toggle Button

oui-toggle-button

React aria components Toggle Button with shadcn characteristics.

react-aria-components, class-variance-authority1 file1 example

Toggle Button Group

oui-toggle-button-group

React aria components Toggle Button Group with shadcn characteristics.

react-aria-components, class-variance-authority, tailwind-merge1 file1 example

Tooltip

oui-tooltip

React aria components Tooltip with shadcn characteristics.

react-aria-components, tailwind-merge1 file1 example

From the oui readme

Oui

React Aria Components with Shadcn characteristics

Copy-and-paste react aria components that run side-by-side with shadcn components.

Demo → https://oui.mw10013.workers.dev

Getting Started

Oui is designed to integrate seamlessly with the shadcn ecosystem. The components follow shadcn conventions and use the shadcn design system, so they'll feel familiar to anyone who has used shadcn before.

1. Install Shadcn

Install shadcn using the official instructions.

2. Add oui components using the shadcn cli

Use the shadcn cli to add oui components.

pnpm dlx shadcn@latest add @oui/[COMPONENT]
npx shadcn@latest add @oui/[COMPONENT]
yarn shadcn@latest add @oui/[COMPONENT]
bunx --bun shadcn@latest add @oui/[COMPONENT]

You can use the demo to find components. View code for a component contains the cli to add.

Note: Oui does not overwrite any shadcn files so you can run oui and shadcn components side-by-side.

3. Add all oui components (optional)

You can add all oui components with a single command by adding oui-index.

pnpm dlx shadcn@latest add @oui/oui-index
npx shadcn@latest add @oui/oui-index
yarn shadcn@latest add @oui/oui-index
bunx --bun shadcn@latest add @oui/oui-index

import * as Oui from "@/components/ui/oui-index"

export default Component() {
  return (Hello, Oui)
}

Local Dev

pnpm i
pnpm dev

Deploy

pnpm deploy:PRODUCTION
Workers & Pages Settings:
- Git repository: connect to git repo
- Build configuration
  - Build command: CLOUDFLARE_ENV=production pnpm build
  - Deploy command: pnpm exec wrangler deploy

Llms

Reference source code for React Aria Components and React Day Picker is stored in the refs directory for LLM scanning and reference.

pnpm refs:react-spectrum
pnpm refs:react-day-picker

Credit

Concept by https://coss.com/origin

License

Licensed under the MIT License.

oui contents

Keyboard

Dialog

About oui

Also in the oui registry

Alert

Badge

Base

Button

Button Group

Calendar

Card

Checkbox

Checkbox Group

Combo Box

Date Field

Date Picker

Dialog

Disclosure

Field

Oui Index

Input

Input Group

Keyboard

Label

Link

List Box

Menu

Modal

Number Field

Pagination

Popover

Radio Group

React Router Error Boundary

Oui React Router Index

React Router Provider

oui-react-router-theme-toggle-button

Search Field

Select

Separator

Sheet

Sidebar

Slider

Switch

Table

Tabs

Text Area

Text Field

Toggle Button

Toggle Button Group

Tooltip

From the oui readme

Oui

Getting Started

Local Dev

Deploy

Llms

Credit

License

What oui builds on

Registries like oui

Related libraries

About oui

All 2 oui components