Installation

Add the Rezi UI registry to your project.

Rezi UI targets Tailwind CSS v4. Projects on Tailwind v3 are not supported.

Set up shadcn in your project: npx shadcn@latest init --base radix

Rezi UI is built on Radix. --base radix keeps your own shadcn components on the same primitives; without it the CLI defaults to Base UI. Rezi UI components still install into a Base UI project, but you end up with two primitive libraries side by side.
Add the Rezi UI namespace: npx shadcn@latest registry add @reziui=https://reziui.rezianislami.workers.dev/r/{name}.json

Or add it to components.json by hand:

code

{
  "registries": {
    "@reziui": "https://reziui.rezianislami.workers.dev/r/{name}.json"
  }
}

Install the Rezi UI theme: npx shadcn@latest add @reziui/theme
Install a component: npx shadcn@latest add @reziui/button

Install the theme directly (step 3) before any component. Components list @reziui/theme as a dependency, but when it arrives that way the shadcn CLI only adds missing variables and keeps your existing --background, --primary, --border and friends. Components still render correctly without it — they read their own --btn-* tokens — but surfaces and borders follow your current theme instead of Rezi UI's.

Dark mode follows the shadcn convention: add the dark class to an ancestor (for example <html class="dark">, or let next-themes do it).

The --font-sans token is expected to point at Geist. With next/font, register Geist under that variable:

code

const geistSans = Geist({ variable: "--font-sans", subsets: ["latin"] });