shadcn

Manages shadcn/ui components, presets, and registries via the shadcn CLI.

Updated Jul 25, 2026
One-click install
npx skills add https://github.com/kaannakiin/turborepo_template --skill shadcn-kaannakiin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/kaannakiin/turborepo_template/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/kaannakiin/turborepo_template --skill shadcn-kaannakiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with shadcn/ui requires knowing the correct component APIs, composition rules, and CLI workflows; this Skill provides project-aware context, enforced styling rules, and CLI-driven workflows so components are added, updated, and composed correctly. ## Core Features & Use Cases - Component management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced UI rules: Critical rules for forms (FieldGroup/Field), composition (Groups, Titles, Card structure), icons (data-icon), styling (semantic tokens, gap-, size-), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Presets and theming: Initialize projects with named presets or preset codes, apply or merge presets, and customize themes via CSS variables. - Use Case: Ask to build a settings form in a Next.js shadcn project, and the Skill reads project context (base, iconLibrary, aliases), fetches component docs, and generates code using FieldGroup, ToggleGroup, and semantic colors. ## Quick Start Ask the assistant to add a shadcn component like "add a login form block to my project" and it will use the shadcn CLI to search, preview, and install it correctly.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to my project?

Run npx shadcn@latest add followed by component names, registry namespaces like @magicui/item, or GitHub addresses like owner/repo/item. Use --dry-run and --diff first to preview exactly which files would change before writing anything.

How do I update a shadcn component without losing my local changes?

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates per file while preserving your modifications, and never use --overwrite without explicit approval.

What is the difference between base and radix in shadcn/ui?

The base field in components.json determines the primitive library and component APIs. Radix uses asChild for composition while Base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.

How do I apply or switch a shadcn preset code?

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or init --preset <code> --force --no-reinstall to update only config and CSS. Never decode preset codes manually; use preset decode, preset url, or preset resolve commands instead.

Why should I avoid space-y-* and raw color classes in shadcn projects?

shadcn/ui rules require flex with gap-* for spacing and semantic tokens like bg-primary or text-muted-foreground for colors. Raw values like bg-blue-500 and space-y-* break theming, dark mode, and component consistency.

Can I use shadcn/ui in a monorepo?

Yes, the CLI supports monorepo scaffolding via the --monorepo flag with templates like next, vite, start, react-router, and astro. Laravel is the only template without monorepo support.