Skip to content
organui
GitHub repository, 143 stars

Next.js

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

  1. Create the project

    This creates a Next.js 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 next --preset base-nova -n my-app

    For an existing Next.js 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 app/page.tsx:

    app/page.tsx
    import { Heart } from "@/components/heart"

export default function Page() {
  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

    A block installs its page into app along with its components: bunx shadcn add @organui/explorer-01 adds app/explorer/page.tsx.