skills.rest
Aditya81018
Aditya81018COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

3|Updated Aug 18, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#preset
One-click install
npx skills add https://github.com/Aditya81018/Apple-Internship --skill shadcn-aditya81018
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Aditya81018/Apple-Internship/tree/main/website/.agents/skills/shadcn
Command: npx skills add https://github.com/Aditya81018/Apple-Internship --skill shadcn-aditya81018

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent UI with shadcn/ui requires knowing the correct component APIs, composition rules, and CLI workflows; this Skill provides project-aware guidance so components are added, styled, and composed correctly the first time. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local modifications. - Enforced Composition Rules: Applies critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap spacing), icons (data-icon), overlays, and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Preset & Theme Workflows: Initialize projects with named presets or preset codes, switch presets via overwrite/merge/skip strategies, and customize themes through CSS variables. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form using the shadcn CLI in your project.

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 the 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 search shadcn registries for components?▼

Use npx shadcn@latest search with an optional registry namespace and query, such as npx shadcn@latest search @shadcn -q "sidebar". Without a registry argument, it searches every registry configured in components.json.

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 update shadcn components without losing my 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 local modifications, and never use --overwrite without explicit approval.

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

Use npx shadcn@latest apply <code> to overwrite components with a new preset, or npx shadcn@latest init --preset <code> --force --no-reinstall to update only config and CSS. Inspect presets first with preset decode or preset resolve.

Why should I not use space-y or raw color classes with shadcn/ui?▼

The skill enforces flex with gap-* instead of space-y-*/space-x-* and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent with dark mode.

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
lenneTechlenneTech

developing-lt-frontend

Develop lenne.tech Nuxt 4 frontends with TypeScript, Valibot forms, and generated API types.

Official
Advanced
murphytruemanmurphytrueman
155

theme-audit

Audit design system theme coverage, consistency, and component tier propagation.

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

shadcn-ui

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

Official
Advanced