How to Do shadcn/ui Installation on Claude Code

The fastest way to install shadcn/ui with Claude Code is to open a session in your project root and ask Claude to run the shadcn@latest init CLI, configure components.json, and add your first components. Claude handles the Tailwind CSS config, path aliases, and dependency wiring automatically. Works best in Next.js 14+, Vite + React, and Remix projects. The one catch: if you hit a usage limit mid-scaffold, your session stops and you lose momentum. Tools like Usagebar show your remaining Claude Code quota in the macOS menu bar so you know before you start a large install whether you have enough runway.

• shadcn/ui is not an npm package - it copies component source directly into your repo (shadcn/ui docs)
• The CLI requires Tailwind CSS 3+ and a configured tsconfig.json path alias (@/)
• Claude Code can scaffold a full component library in a single conversation if your usage window is open

What is shadcn/ui and why install it via Claude Code?

shadcn/ui is a collection of accessible, composable React components built on Radix UI primitives and styled with Tailwind CSS. Unlike a traditional component library, it uses a CLI to copy component source files directly into your project under a components/ui/ directory. You own the code and can modify it freely.

Installing it via Claude Code is practical because the setup involves several interdependent steps: initialising the CLI, resolving peer dependencies, aligning tailwind.config, setting up CSS variables, and verifying path aliases. Claude keeps all of that context in one thread and can debug mismatches on the spot - far faster than bouncing between docs tabs.

Developers building React UIs, dashboards, or SaaS front ends with Claude Code will get the most out of this workflow. If you also want a responsive navbar scaffolded by Claude Code, shadcn/ui's NavigationMenu component is a natural fit.

Prerequisites before you prompt Claude

Before opening Claude Code, confirm your project meets the shadcn/ui installation requirements:

• Node.js 18+ installed and on your PATH
• A React framework: Next.js (App Router or Pages), Vite + React, or Remix
• Tailwind CSS already added to the project (or tell Claude to add it as part of the session)
• A tsconfig.json or jsconfig.json with a @/* path alias pointing to your source root
• A package manager: npm, pnpm, yarn, or bun

If Tailwind isn't set up yet, that's fine - just include it in your first prompt. Claude can install and configure both in sequence.

How to install shadcn/ui step by step in Claude Code

Step 1: Start Claude Code in your project directory

Open your terminal, navigate to the project root, and launch Claude Code:

cd my-app
claude

Make sure your Claude Code macOS terminal setup is working before proceeding. If you're on a Pro or Max plan, confirm you have sufficient usage remaining - large scaffolding tasks consume more tokens than simple edits.

Step 2: Give Claude the install prompt

A clear, single prompt works better than chaining messages. Here is a reliable template:

Set up shadcn/ui in this Next.js project. Run `npx shadcn@latest init`, 
choose the default style (New York), CSS variables enabled, and the slate 
base colour. After init, add the Button, Card, and Input components. 
Make sure the @/ path alias is configured in tsconfig.json.

Adjust the component list and style preference to your project. Claude will execute the CLI commands, inspect outputs, and fix any errors that appear in the terminal.

Step 3: Review the generated configuration

After Claude finishes, verify these files were created or updated correctly:

• components.json - shadcn/ui project config (style, paths, Tailwind config location)
• tailwind.config.ts - updated with the darkMode class strategy and CSS variable references
• app/globals.css (or equivalent) - CSS custom properties for the colour palette
• components/ui/button.tsx, card.tsx, input.tsx - the copied component files
• lib/utils.ts - the cn() helper that merges Tailwind class names

Ask Claude to open each file and confirm the content if you want a double-check inline.

Step 4: Add more components on demand

Once init is complete, adding further components is a one-liner prompt:

Add the Dialog, Select, and Toast components from shadcn/ui.

Claude runs npx shadcn@latest add dialog select toast and places the files in components/ui/. You can also ask it to immediately wire a component into an existing page: "Add a Dialog component to the settings page that confirms before deleting an item."

Step 5: Handle common errors Claude will resolve

These issues come up often during shadcn/ui installs and Claude can resolve all of them in the same session:

• Path alias not found: Claude updates tsconfig.json and vite.config.ts (if Vite) to add the @/ alias
• Tailwind not detecting component classes: Claude adds the components/**/*.{ts,tsx} glob to the content array in tailwind.config
• Peer dependency conflicts with React 19: Claude can pin versions or pass --legacy-peer-deps as appropriate
• CSS variables not applying: Claude checks that your root layout imports globals.css and that darkMode: ["class"] is set in Tailwind config

How to use slash commands to speed up the workflow

Claude Code's slash commands are useful checkpoints during a component install session. The most relevant ones for a shadcn/ui workflow are:

• /usage - check your remaining Claude Code token quota before starting a large component scaffold
• /clear - reset context between major install phases to avoid bloating the conversation window
• /compact - summarise a long debug thread so Claude stays focused on the current error

Running /usage before a big install is good practice. If you're close to a limit, you risk a mid-task interruption - exactly the scenario that causes lost context and half-configured components.json files. Knowing when your Claude Code usage resets helps you time larger scaffolding jobs.

Avoid mid-install interruptions with Usagebar

A shadcn/ui initialisation plus several components typically runs through a moderate amount of your usage window. If Claude cuts out halfway through configuring components.json or setting up CSS variables, you can end up with a partially configured project that's harder to debug cold.

Usagebar sits in your macOS menu bar and shows your Claude Code usage at a glance, with smart alerts at 50%, 75%, and 90% capacity. Credentials are stored in macOS Keychain, not plain text. There's a free tier for students and a pay-what-you-want model for everyone else.

Instead of running /usage mid-conversation and losing flow, you see exactly where you stand from the menu bar before you type the first prompt. That's particularly useful before UI scaffolding tasks like this one, where interruption means incomplete wiring across multiple config files. You can also check how to check your Claude Code usage limits for other methods.

Get Usagebar - instant download, flexible pricing, free for students.

Quick reference: shadcn/ui install prompts for Claude Code

Task	Prompt to use
Full init (Next.js)	"Run shadcn@latest init with New York style, slate colour, CSS variables on"
Add specific components	"Add the Button, Dialog, and Table components from shadcn/ui"
Fix path alias	"The @/ alias isn't resolving - fix tsconfig.json and vite.config"
Add Tailwind if missing	"Install Tailwind CSS and then run shadcn init in this Vite + React project"
Wire a component to a page	"Add a shadcn Card to the dashboard page showing user stats"
Dark mode support	"Enable dark mode with shadcn's ThemeProvider and a toggle button in the nav"

Key takeaways

1. shadcn/ui copies component source into your project - Claude Code can scaffold the entire install including config files in one session
2. Give Claude a single detailed prompt covering style, colour, path alias, and initial components rather than chaining small requests
3. Use /usage or Usagebar before starting to confirm you have enough quota for the full install
4. Prereqs that must be in place: Node 18+, a React framework, Tailwind CSS, and a tsconfig.json @/ path alias
5. Common errors (path alias, peer deps, CSS variables) are all resolvable inline - keep Claude in the same session rather than starting over
6. For ongoing UI work, pair shadcn/ui components with Claude Code's ability to build responsive navbars and create full React components

Sources

• https://ui.shadcn.com/docs/installation
• https://ui.shadcn.com/docs/installation/next
• https://www.radix-ui.com/