Skip to content
organui
GitHub repository, 143 stars

Vite

Create a Vite app with shadcn, then add OrganUI components to it.

  1. Create the project

    This creates a Vite app with Tailwind CSS and shadcn's base-nova style, built on Base UI. For Radix, use radix-nova and add the namespace in Radix projects.

    bunx shadcn@4.22.1 init -t vite --preset base-nova -n my-app

    For an existing Vite app, run bunx shadcn@4.22.1 init --preset base-nova in its folder instead.

  2. Add components

    From the project folder, add any component by name. Its OrganUI and shadcn dependencies install in the same run.

    bunx shadcn@4.22.1 add @organui/heart

  3. Use them

    Import the component from your components directory, here in src/App.tsx:

    src/App.tsx
    import { Heart } from "@/components/heart"

export default function App() {
  return (
    <main className="mx-auto flex min-h-svh max-w-3xl flex-col gap-4 p-6">
      <h1 className="text-2xl font-semibold">Heart</h1>
      <Heart />
    </main>
  )
}

  4. Blocks

    Vite has no file routing, so a block installs its components without its page: bunx shadcn add @organui/explorer-01 adds components/organ-explorer.tsx. Render it as the block's page does, such as <OrganExplorer model={heartModel} />.