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
252 lines
11 KiB
Markdown
252 lines
11 KiB
Markdown
## 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](https://ui.shadcn.com/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](https://ui.shadcn.com/docs/cli) — Full CLI v4 reference
|
||
- [shadcn/ui Skills docs](https://ui.shadcn.com/docs/skills) — AI agent Skills setup
|
||
- [shadcn/ui MCP Server docs](https://ui.shadcn.com/docs/registry/mcp) — MCP connection guide
|
||
- [shadcn/ui Changelog: CLI v4](https://ui.shadcn.com/docs/changelog/2026-03-cli-v4) — v4 release notes
|
||
|
||
[\\
|
||
Sonar](https://dev.to/sonar) Promoted
|
||
|
||
Dropdown menu
|
||
|
||
- [What's a billboard?](https://dev.to/billboards)
|
||
- [Manage preferences](https://dev.to/settings/customization#sponsors)
|
||
|
||
* * *
|
||
|
||
- [Report billboard](https://dev.to/report-abuse?billboard=259979)
|
||
|
||
[](https://www.sonarsource.com/sem/the-state-of-code/developer-survey-report/?utm_medium=paid&utm_source=dev&utm_campaign=ss-state-of-code-developer-survey26&utm_content=report-devsurvey-banner-x-2&utm_term=ww-all-x&s_category=Paid&s_source=Paid+Social&s_origin=dev&bb=259979)
|
||
|
||
## [State of Code Developer Survey report](https://www.sonarsource.com/sem/the-state-of-code/developer-survey-report/?utm_medium=paid&utm_source=dev&utm_campaign=ss-state-of-code-developer-survey26&utm_content=report-devsurvey-banner-x-2&utm_term=ww-all-x&s_category=Paid&s_source=Paid+Social&s_origin=dev&bb=259979)
|
||
|
||
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 the results](https://www.sonarsource.com/sem/the-state-of-code/developer-survey-report/?utm_medium=paid&utm_source=dev&utm_campaign=ss-state-of-code-developer-survey26&utm_content=report-devsurvey-banner-x-2&utm_term=ww-all-x&s_category=Paid&s_source=Paid+Social&s_origin=dev&bb=259979)
|
||
|
||
Read More
|
||
|
||
|
||
|
||
|
||
[Create template](https://dev.to/settings/response-templates)
|
||
|
||
Templates let you quickly answer FAQs or store snippets for re-use.
|
||
|
||
SubmitPreview [Dismiss](https://dev.to/404.html)
|
||
|
||
Some comments may only be visible to logged-in visitors. [Sign in](https://dev.to/enter) 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](https://dev.to/_46ea277e677b888e0cd13/shadcnui-claude-code-3-settings-that-fix-ai-generated-ui-quality-2dea#).
|
||
|
||
|
||
Hide child comments as well
|
||
|
||
Confirm
|
||
|
||
|
||
For further actions, you may consider blocking this person and/or [reporting abuse](https://dev.to/report-abuse)
|
||
|
||
[\\
|
||
The DEV Team](https://dev.to/devteam) Promoted
|
||
|
||
Dropdown menu
|
||
|
||
- [What's a billboard?](https://dev.to/billboards)
|
||
- [Manage preferences](https://dev.to/settings/customization#sponsors)
|
||
|
||
* * *
|
||
|
||
- [Report billboard](https://dev.to/report-abuse?billboard=262076)
|
||
|
||
[](https://dev.to/googleai/gemini-31-flash-lite-developer-guide-and-use-cases-1hh?bb=262076)
|
||
|
||
## [Gemini 3.1 Flash-Lite: Developer guide and use cases](https://dev.to/googleai/gemini-31-flash-lite-developer-guide-and-use-cases-1hh?bb=262076)
|
||
|
||
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.
|
||
|
||
[Read More](https://dev.to/googleai/gemini-31-flash-lite-developer-guide-and-use-cases-1hh?bb=262076)
|
||
|
||
👋 Kindness is contagious
|
||
|
||
Dropdown menu
|
||
|
||
- [What's a billboard?](https://dev.to/billboards)
|
||
- [Manage preferences](https://dev.to/settings/customization#sponsors)
|
||
|
||
* * *
|
||
|
||
- [Report billboard](https://dev.to/report-abuse?billboard=236872)
|
||
|
||
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](https://dev.to/enter?state=new-user&bb=236872)
|
||
|
||
|
||
|
||
We're a place where coders share, stay up-to-date and grow their careers.
|
||
|
||
|
||
[Log in](https://dev.to/enter?signup_subforem=1) [Create account](https://dev.to/enter?signup_subforem=1&state=new-user)
|
||
|
||
 |