Oui

React Aria Components with Shadcn characteristics

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

Demo →

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 using the official .

2. Add oui components using the shadcn cli

Use the shadcn 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 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-indexnpx shadcn@latest add @oui/oui-indexyarn shadcn@latest add @oui/oui-indexbunx --bun shadcn@latest add @oui/oui-index
ts
import * as Oui from "@/components/ui/oui-index"
export default Component() {  return (<Oui.Button>Hello, Oui</Oui.Button>)}

Local Dev

pnpm ipnpm dev

Deploy

  • pnpm deploy:PRODUCTION
  • Workers & Pages Settings: <WRANGLER_NAME>
    • 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-spectrumpnpm refs:react-day-picker

Credit

Concept by

License

Licensed under the .