db906fd85a
- Replace .eslintrc.cjs with eslint.config.mjs (ESLint 9 flat config)
using direct eslint-plugin-solid + @typescript-eslint/parser approach
- Add @typescript-eslint/parser to root devDependencies
- Add main/module/types top-level fields to packages/core/package.json
- Add resolve.conditions to packages/core/vite.config.ts
- Create packages/core/tsconfig.test.json for test type-checking
- Remove empty paths:{} from packages/core/tsconfig.json
11 KiB
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
Enter fullscreen modeExit fullscreen mode
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
Enter fullscreen modeExit fullscreen mode
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
Enter fullscreen modeExit fullscreen mode
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
Enter fullscreen modeExit fullscreen mode
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
Enter fullscreen modeExit fullscreen mode
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.
References
- shadcn/ui CLI docs — Full CLI v4 reference
- shadcn/ui Skills docs — AI agent Skills setup
- shadcn/ui MCP Server docs — MCP connection guide
- shadcn/ui Changelog: CLI v4 — v4 release notes
\
Sonar Promoted
Dropdown menu
State of Code Developer Survey report
Did you know 96% of developers don't fully trust that AI-generated code is functionally correct, yet only 48% always check it before committing? Check out Sonar's new report on the real-world impact of AI on development teams.
Read More
Templates let you quickly answer FAQs or store snippets for re-use.
SubmitPreview Dismiss
Some comments may only be visible to logged-in visitors. Sign in to view all comments.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
\
The DEV Team Promoted
Dropdown menu
Gemini 3.1 Flash-Lite: Developer guide and use cases
Gemini 3.1 Flash-Lite is the high-volume, affordable powerhouse of the Gemini family. It’s purpose-built for large-scale tasks where speed and cost-efficiency are the main priorities, making it the ideal engine for background processing. Whether you're handling a constant stream of user interactions or need to process massive datasets with tasks like translation, transcription, or extraction, Flash-Lite provides the optimal balance of speed and capability.
This guide walks through seven practical use cases for Flash-Lite using the google-genai Python SDK.
👋 Kindness is contagious
Dropdown menu
x
Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.
A simple “thank you” can uplift the author and spark new discussions—leave yours below!
On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.
Okay
We're a place where coders share, stay up-to-date and grow their careers.
