🚀 Using the New shadcn/ui Theme Generator: Essential Commands

🧱 1. Create a New Project (optional)

If you’re starting fresh, initialize a new Next.js project:

bashCopy
npx create-next-app@latest my-app
cd my-app

---

📦 2. Install shadcn/ui

Add the shadcn/ui CLI to your project:

bashCopy
npx shadcn@latest init

This sets up the component registry, Tailwind config, and required folders.

---

🎨 3. Add Your Theme

After generating your theme on the Theme Generator website, you’ll receive a block of CSS variables. Add them to your project with:

bashCopy
npx shadcn@latest add theme

Then paste your generated CSS tokens into the created file (usually globals.css or theme.css depending on your setup).

---

🧩 4. Install Components That Use the Theme

Any component you add will automatically use your new theme tokens:

bashCopy
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input

You can add as many components as you need. They will all inherit your colors, fonts, and radii.

---

🛠️ 5. Update Tailwind (if needed)

If you’re using Tailwind v4, ensure your config is synced:

bashCopy
npx shadcn@latest sync

This updates your Tailwind setup to match your theme and component registry.

---

🎉 You’re Ready to Build

With your theme installed and components added, your project now has:

• A fully consistent color system
• Light and dark mode palettes
• Accessible contrast levels
• Curated font pairings
• Automatic styling for all shadcn/ui components

Your UI will look polished from the first line of code.