shadcn/ui + Claude Code: 3 Settings That Fix AI-Generated UI Quality

#ai #mcp #tooling #ui

TL;DR

Claude Code guesses your component APIs, theme tokens, and project setup — and gets them wrong half the time. shadcn/ui ships 3 tools (Skills, MCP Server, Preset) that inject real project context into your AI. Setup takes 5 minutes, 3 commands.

# 1. Project context
npx skills add shadcn/ui

# 2. Live docs
claude mcp add shadcn -- npx shadcn@latest mcp

# 3. Design system
npx shadcn@latest init --preset a1Dg5eFl

The Problem: AI-Generated UI Looks Inconsistent

If you've used Claude Code to build UI, you've probably seen this:

The AI generates a <Button variant="outline"> but your project uses <Button variant="ghost">.
Colors change between pages because there's no shared design token.
You spend 15 minutes searching docs for the correct props, then paste them into the prompt.

This happens because Claude Code doesn't know your project context. It relies on training data — not your components.json, not your Tailwind config, not your installed component list.

What is shadcn/ui?

Quick background if you haven't used it: shadcn/ui is a copy-and-own component system built on Radix UI and Tailwind CSS. Instead of installing an npm package, you copy component source code directly into your project. Full ownership, full customization.

86,900+ GitHub stars. Used by Adobe, OpenAI, Sonos. 70+ components — Button, Card, Dialog, Data Table, Sidebar, Chart, and more.

The 3 Settings That Fix Everything

shadcn/ui CLI v4 (released March 2026) has a tagline: "Built for you and your coding agents." Here's what that means in practice.

1. Skills: Inject Project Context

npx skills add shadcn/ui

This one command makes Claude Code "understand" your project. Skills detects your components.json and runs shadcn info --json to feed the AI:

Framework type and version
Tailwind CSS version and config
Path aliases
Installed component list
Icon library info

Before Skills, the AI guesses. After Skills, it reads your actual setup and generates code that matches — correct FieldGroup patterns, correct semantic color variables, correct import paths.

2. MCP Server: Live Documentation Access

claude mcp add shadcn -- npx shadcn@latest mcp

MCP (Model Context Protocol) connects Claude Code directly to the shadcn/ui registry. During a conversation, the AI can:

Look up component docs, examples, and props in real time
Auto-generate install commands
Search community registries

No more browser tabs. Ask "add sorting to my Data Table" and Claude Code pulls the latest docs, then writes the correct implementation.

3. Preset: One-Line Design System

npx shadcn@latest init --preset a1Dg5eFl

A Preset packs colors, themes, icons, fonts, and border-radius into a single code. Build your design system visually at shadcn/create, share the preset code with your team, and everyone — including Claude Code — uses the same design tokens.

Include the preset code in your AI prompts, and every generated component stays consistent with your design system.

Before vs After

	Before	After
Context	Guesses from training data	Reads live project config
API accuracy	Frequent errors	Correct patterns from latest docs
Theme consistency	Different per page	Unified via CSS variables & preset
Doc lookup	Manual, ~15 min	MCP auto-search
Component scope	Basic UI only	Includes community registries

CLI v4 Commands You'll Actually Use

# Initialize with preset
npx shadcn@latest init --preset [CODE]

# Add components
npx shadcn@latest add button card dialog

# Install everything
npx shadcn@latest add --all

# Search registries
npx shadcn@latest search @shadcn

# Preview components
npx shadcn@latest view button card

# Look up docs
npx shadcn@latest docs data-table

# Dry run (preview changes)
npx shadcn@latest add --dry-run

# Show diff before applying
npx shadcn@latest add --diff

FAQ

Is shadcn/ui free?
Yes. Fully open source, MIT license. Commercial use is fine.

Does it work outside Next.js?
CLI v4 supports Next.js, Remix, Vite, Astro, and more. It auto-detects your framework from components.json.

Do I need all 3 settings?
Skills alone gives you project context. But adding MCP Server (live docs) and Preset (design tokens) together gives the best results. The 3 tools complement each other.

Can I add this to an existing project?
Yes. If components.json exists, Skills picks it up automatically. For new projects, start with npx shadcn@latest init.

Wrapping Up

3 commands, 5 minutes. Your AI stops guessing and starts reading your actual project. If you haven't set this up yet, start with npx skills add shadcn/ui — you'll see the difference on the first prompt.