Skip to content

Installation

Get up and running quickly. These steps assume a Next.js app. If you already have Next.js and Tailwind CSS configured, jump straight to the CLI step.

1. Create a new Next.js app (optional)

pnpm create next-app@latest

2. Initialize shadcn/ui

This sets up components.json, installs dependencies, and configures paths. Accept the prompts or adjust as needed.

pnpm dlx shadcn@latest init

Recommended answers for this project

  • Style: new-york
  • Use TypeScript RSC: Yes
  • CSS file: app/globals.css
  • Base color: neutral
  • Aliases: components@/components, utils@/lib/utils, ui @/components/ui, lib@/lib, hooks@/hooks

3. Add a component from the official registry (optional)

pnpm dlx shadcn@latest add button card

4. Add components from this hub (custom registry)

You can install components from this project using the shadcn CLI by referencing our registry item URLs. During local development:

pnpm dlx shadcn@latest add http://localhost:3000/r/tabs.json

When deployed, replace the URL with your domain, for example:

pnpm dlx shadcn@latest add https://your-domain.com/r/tabs.json

That's it

Your components will be placed into components/ui and any extra files declared by the registry will be added to the right targets. Explore the sidebar to browse and install more.

Build your next big idea with us

From lightning-fast landing pages to fully functional SaaS products, we turn your vision into reality. Book a call today and let's make something extraordinary.

They transformed our idea into a fully functional product in record time. Couldn't be happier!

Alex Chen

Founder, StartupX

The team's attention to detail and design expertise set our product apart in the market.

Sarah Kim

CTO, Innovate Inc