skills.rest
eubyt
eubytCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

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

Updated Sep 19, 2026
Search Tags:#React#cli#registry#tailwind#ui components#ShadCN#presets
One-click install
npx skills add https://github.com/eubyt/tools.eubyt.dev --skill shadcn-eubyt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/eubyt/tools.eubyt.dev/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/eubyt/tools.eubyt.dev --skill shadcn-eubyt

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 component management so generated code matches the project's actual configuration. ## Core Features & Use Cases - Component Management: Search registries, add, update, and preview components with the shadcn CLI using dry-run and diff workflows that preserve local changes. - 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, apply or merge preset codes, and customize themes via CSS variables for Tailwind v3/v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project context (base, icon library, aliases), fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: create a dashboard with stat cards using shadcn/ui components in my 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 component names, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (pnpm dlx or bunx), and preview changes first with --dry-run or --diff before writing files.

How do I update shadcn components 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 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 and component APIs. Radix uses asChild for composition while Base uses render, and props differ for Select, ToggleGroup, Slider, and Accordion; check the base field via npx shadcn@latest info.

How do I apply a shadcn preset code to an existing project?▼

Run npx shadcn@latest apply <code> inside a project with components.json to overwrite theme, fonts, and components. Use --only theme,font for partial updates, or init --preset <code> --force --no-reinstall to update config while leaving components unchanged.

Can I use community registries with the shadcn CLI?▼

Yes, the CLI supports namespaced registries like @magicui, public GitHub sources as owner/repo/item, and registry URLs. After adding third-party components, verify imports match your project's aliases and icon library, since registry items may use default paths.

Why should I not fetch shadcn component files directly from GitHub?▼

Manual fetching bypasses registry resolution, file path mapping, and CSS diffing that the CLI handles automatically. Always use npx shadcn@latest add with --dry-run, --diff, or --view to inspect and install components correctly.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
GuibibiGuibibi

nuxt-ui

Build styled Nuxt 4 and Vue 3 interfaces with @nuxt/ui v4 components.

Community
Advanced
murphytruemanmurphytrueman
155

theme-audit

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

Community
Advanced
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

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

Community
Intermediate