skills.rest
Kiyozz
KiyozzCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

21|1|Updated Feb 17, 2019
Search Tags:#React#cli#tailwind#ui components#ShadCN#presets#component registry
One-click install
npx skills add https://github.com/Kiyozz/papyrus-compiler-app --skill shadcn-kiyozz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Kiyozz/papyrus-compiler-app/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Kiyozz/papyrus-compiler-app --skill shadcn-kiyozz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, component composition rules, and project-specific configuration (base vs radix, Tailwind version, icon library). This Skill eliminates guesswork by injecting live project context and enforcing correct usage patterns, preventing common mistakes like wrong imports, invalid composition, or raw color overrides. ## Core Features & Use Cases - Component Management: Add, search, view, and update components from official and community registries using the shadcn CLI with dry-run and diff previews. - Composition & Styling Rules: Enforces correct patterns for forms (FieldGroup/Field), chat UI (MessageScroller/Bubble), icons (data-icon), and semantic Tailwind tokens. - Preset Workflows: Initialize projects, decode and apply preset codes, and switch presets with overwrite, partial, merge, or skip strategies. - Use Case: When asked to build a settings form in a Next.js shadcn project, the Skill checks installed components, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## Quick Start Ask the AI to add a dialog and card component to your shadcn/ui project and build a profile editing form 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, such as npx shadcn@latest add button card dialog. Use the package runner matching your project's packageManager, and preview changes first with --dry-run or --diff before writing files.

How to update shadcn components without losing local changes?▼

Use the smart merge workflow: run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> per file to compare upstream changes. Apply upstream updates while preserving local 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, which changes 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.

Can I use shadcn/ui presets with an existing project?▼

Yes, run npx shadcn@latest apply <code> in an existing project with a components.json file to overwrite preset-driven config, fonts, and CSS variables. Use --only theme,font for partial updates, or init --preset <code> --force --no-reinstall to keep components unchanged.

Why should I avoid space-y and raw Tailwind colors in shadcn projects?▼

shadcn/ui components rely on semantic CSS variable tokens like bg-primary and text-muted-foreground that handle light and dark modes automatically. Use flex with gap-* instead of space-x-*/space-y-*, and Badge variants or semantic tokens instead of raw colors like bg-blue-500.

How do I get documentation for a specific shadcn component?▼

Run npx shadcn@latest docs <component> to get resolved URLs for the component's documentation, examples, and API reference. Fetch those URLs to read the actual content before creating, fixing, or debugging the component.

Related Skills

Explore More Software Engineering Skills→
dsgalkardsgalkar

shadcn

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

Community
Intermediate
Benmore-StudioBenmore-Studio
1

pcs-new-service

Generate a complete PCS microservice scaffold with FastAPI, Kafka, and Docker.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

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