Installation

Requirements

• React 19 and Tailwind CSS 4.
• A project initialised with shadcn, using one of its Base UI styles, such as base-nova. Items with controls compose shadcn's components through Base UI.
• Any framework shadcn supports. Next.js and Vite are tested on every change; blocks add a page only in frameworks with file routing.

For a new project, run:

bunx shadcn@4.22.1 init --preset base-nova

The commands use Bun and pin the shadcn version the registry is tested with. npx, pnpm dlx and yarn dlx work the same way.

Add components

@organui is listed in shadcn's registry directory, so the CLI knows it without any setup. Install any item by name:

bunx shadcn@4.22.1 add @organui/heart

Or by its address, which works the same, including for items that depend on other OrganUI items:

bunx shadcn@4.22.1 add https://organui.com/r/heart.json

The CLI installs each item's dependencies in the same run: other OrganUI items, such as the shared organ viewer behind every organ, and the shadcn components they use. Each component page shows its command, and the full catalog is served at /r/registry.json.

Register the namespace (optional)

To pin the registry address, point it at a copy you host, or use a shadcn CLI older than the directory, add the namespace to components.json yourself:

{
  "registries": {
    "@organui": "https://organui.com/r/{name}.json"
  }
}

Install from GitHub

The repository is also a GitHub registry, so items install straight from source. Append #<commit> to pin a version; OrganUI dependencies still resolve through @organui.

bunx shadcn@4.22.1 add organui/organui/anatomy-tree

After install

The files land in your components directory, or in your UI directory for registry:ui items, and the CLI prints a link to the item's page. Import them from there, and change them as you would your own code. To pick up a later version, run add again and review the diff.