Installation

Rasengan UI is built on top of Shadcn UI.

That means there is no separate setup, no additional configuration, and no new tooling to learn.

If your project is already set up with Shadcn UI, you can start using Rasengan UI immediately.

Prerequisites

Before using Rasengan UI, you must have:

  • A React application
  • Tailwind CSS configured
  • Shadcn UI installed and working

Supported setups include:

If you can run shadcn add, you’re good to go.

Setting up shadcn/ui

If shadcn/ui is not yet installed, follow the official setup guide first:

👉 https://ui.shadcn.com/docs/installation

This will configure:

  • Tailwind CSS
  • CSS variables
  • the cn utility
  • component aliases
  • the shadcn CLI

Rasengan UI does not reconfigure any of this.

Configure the registry

For a nice experience while using Rasengan UI, we recommend you to first configure the registry into your components.json file.

components.json
json{
  "registries": {
    "@rasengan-ui": "https://registry.rasengan.dev/r/{name}.json"
  }
}

Using Rasengan UI components

Rasengan UI components are distributed through a shadcn-compatible registry.

You install them the same way you install shadcn components.

Using the CLI

bashnpx shadcn@latest add <component-id>

Example:

bashnpx shadcn@latest add https://registry.rasengan.dev/r/hero-10.json

or with the registry shortcut

bashnpx shadcn@latest add @rasengan-ui/hero-10

This will:

  • copy the component source code into your project
  • place it alongside your existing shadcn components
  • preserve full ownership of the code

Manual installation

If you prefer full control, you can also:

  1. Copy the component code from the documentation
  2. Paste it into your project
  3. Adjust paths, styles, or behavior as needed

There is no functional difference between CLI and manual installation.

What gets installed?

Each Rasengan UI component includes:

  • the component source code (.tsx)
  • required shadcn primitives (if needed)
  • Tailwind classes
  • minimal, readable logic

Nothing is installed globally. Nothing runs at runtime.

Folder structure

Rasengan UI follows the same conventions as shadcn/ui.

A typical setup looks like this:

txtcomponents/
├── ui/
│   ├── button.tsx
│   ├── dialog.tsx
│   └── ...
├── navbar.tsx
├── sidebar.tsx
└── pricing.tsx

You are free to reorganize everything.

Updates & customization

Rasengan UI does not auto-update components.

If a component changes upstream:

  • you choose when to update
  • you can diff changes manually
  • your local modifications are safe

This is intentional.

Summary

  • Rasengan UI extends Shadcn UI
  • No extra setup required
  • No new dependencies
  • Same CLI
  • Same philosophy
  • Full code ownership

If you already use Shadcn UI, Rasengan UI feels instantly familiar.

PreviousIntroduction
NextComponents