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 (<Oui.Button>Hello, Oui</Oui.Button>)
}

Local Dev

pnpm i
pnpm 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-spectrum
pnpm refs:react-day-picker

Credit

Concept by https://coss.com/origin

License

Licensed under the MIT License.