HomeBookmarks
ouioui
oui

oui

OUby oui
7components294views11bookmarks

Installs all 46 components. Without our CLI, run instead.

Auto-indexed

oui contents

  • Number FieldNumber Field

    Number Field

  • Popover

    Popover

  • Text FieldText Field

    Text Field

  • Text AreaText Area

    Text Area

  • Select

    Select

  • KeyboardKeyboard

    Keyboard

  • DialogDialog

    Dialog

    • That's all 7 components

    About oui

    oui publishes a shadcn registry at oui.mw10013.workers.dev, with 46 components installable through the shadcn CLI.

    Components
    46
    GitHub stars
    7
    Last commit
    Dec 14, 2025
    Repository
    mw10013/oui

    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

    • 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

    • 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

    • Menu

      oui-menu

      React aria components Menu with shadcn characteristics.

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

    • Modal

      oui-modal

      React aria components Modal with shadcn characteristics.

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

    • Pagination

      oui-pagination

      React aria components List Box with shadcn characteristics for pagination.

      react-aria-components, 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

    • 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

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

    Read the rest on GitHub →

    What oui builds on

    The packages and primitives its components pull in, counted across the registry.

    avatar4card2item2alert1button-group1field1input-group1sidebar1

    Registries like oui

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Browse every shadcn registry we track →

    ReUI

    ReUI

    by Sean Hello

    263

    components

    Kokonut UI

    Kokonut UI

    by Kokonut UI

    60

    components

    1. Components
    2. /
    3. oui
    4. /
    5. oui

    Related libraries

    Cnippet

    Cnippet

    by Cnippet

    347

    components

    Jolly UI

    Jolly UI

    by James Shopland

    49

    components

    ReUI

    ReUI

    by Sean Hello

    263

    components

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    uiable

    uiable

    by uiable

    168

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    About oui

    oui is a component library on 21st.dev by oui with 7 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 7 oui components

    • Dialog
    • Keyboard
    • Number Field
    • Popover
    • Select
    • Text Area
    • Text Field

    Browse all component libraries →