React Installation

Shadcn/ui (Recommended)

Copy Page

How to install dependencies and structure your app.

Note: We have the exact same installation process as shadcn/ui.

CLI Usage

Initialize your project with the CLI:

---

🛠️Prerequisites

• Node.js 18+ and npm / yarn / pnpm
• A React/Next.js project (or create one: npx create-next-app@latest)
• Tailwind CSS installed (We’ll help if not set up yet — see the Tailwind guide)

---

🚀 Which Installation Method?

• Already using shadcn/ui? → Use Option 1
• Starting fresh / want a custom registry? → Use Option 2
• Just want to test a component quickly? → Jump to Quick Test

---

✅ Option 1 — Use shadcn/ui (Recommended)

If you’re already using shadcn/ui, you’re done — Sera UI uses the same setup.

New to shadcn/ui? Run:

Then add a Sera UI component:

📘 Full shadcn setup guide →

---

🚀 Option 2 — Use SeraUI CLI (Alternative)

Use the CLI to scaffold and manage components from the Sera UI registry.

1️⃣ Initialize your project

Example output:

📁 What got created:

• lib/utils.ts — Helper utilities (e.g., cn() for merging classes)
• components/ — Where your UI components live
• tailwind.config.js — Updated with Sera UI theme tokens

---

2️⃣ Browse available components

---

3️⃣ Add a component

Output:

---

⚙️ Advanced CLI Options

Initialize with a custom registry

Add a single component from a custom registry

Set a default registry URL

---

🎨 Quick Test

Add this to any page:

Run your dev server — you should see a styled button.

---

✅ What’s Next?

1. Browse components: npx seraui@latest show
2. Add more: npx seraui@latest add tabs
3. Customize theme: edit tailwind.config.js to match your brand

---

Still stuck?

• Open an issue: GitHub