skills.rest
TierOne-Studio
TierOne-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

1|Updated Apr 3, 2026
Search Tags:#frontend#react#design system#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/TierOne-Studio/spa-velocity --skill shadcn-tierone-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/TierOne-Studio/spa-velocity/tree/main/.ruler/skills/shadcn
Command: npx skills add https://github.com/TierOne-Studio/spa-velocity --skill shadcn-tierone-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent React UI with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows, and mistakes like wrong imports, missing accessibility titles, or raw color overrides are common. This Skill encodes the enforced rules and CLI workflows so generated shadcn/ui code is correct on the first pass. ## Core Features & Use Cases - CLI-driven component management: init projects with presets, add/search/view components across registries, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local edits. - Enforced composition and styling rules: FieldGroup-based forms, Group-wrapped items, semantic color tokens, gap-* spacing, data-icon icons, and base-vs-radix API differences with Incorrect/Correct examples. - Project-aware context: reads framework, aliases, Tailwind version, icon library, and resolved paths from npx shadcn@latest info so imports and directives match the actual project. - Use Case: Ask for a settings form with validation states, and receive code using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid, and the project's configured icon library instead of generic markup. ## Quick Start Ask the assistant to add a shadcn/ui dialog component to your project and build a profile-editing form inside it following the project's preset and icon library.

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, using your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.

How do I update shadcn/ui components without losing my customizations?▼

Use 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 local edits, 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 and type="single"/"multiple" props, while base uses render props, multiple booleans, items props on Select, and scalar Slider values.

Does shadcn/ui work with Vite and frameworks other than Next.js?▼

Yes, the CLI supports next, vite, start (TanStack Start), react-router, astro, and laravel templates. All except laravel support monorepo scaffolding via the --monorepo flag.

Why should I avoid space-y-* and raw colors in shadcn/ui code?▼

The skill's rules require flex with gap-* instead of space-x-*/space-y-* for predictable spacing, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors so theming and dark mode work through CSS variables.

How do I switch shadcn/ui presets in an existing project?▼

Run npx shadcn@latest init --preset <code> --force, then choose reinstall (overwrite all components), merge (smart-merge each component via --diff), or skip (update only config and CSS). Preset codes are opaque; pass them directly to the CLI without decoding.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

shadcn

Guides shadcn/ui CLI usage, component installation, theming, and custom registry creation.

Official
Intermediate
tonehqtonehq
11

form_page

Generate full-stack create/edit forms with backend endpoints, Zod schemas, and UI layouts.

Official
Advanced
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced