skills.rest
PhongCT1105
PhongCT1105COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Jul 30, 2026
Search Tags:#theming#react#cli#registry#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill shadcn-phongct1105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/PhongCT1105/okta_stripe_hack/tree/main/frontend/.agents/skills/shadcn
Command: npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill shadcn-phongct1105

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, CLI commands, and project configuration, and mistakes like wrong imports, missing accessibility titles, or raw color classes are common. This Skill injects project context and enforces correct patterns when adding, searching, updating, styling, or composing shadcn/ui components. ## Core Features & Use Cases - Component Management: Search registries, preview changes with --dry-run/--diff, add components, and smart-merge upstream updates while preserving local modifications. - Preset & Theme Workflows: Initialize projects with named presets or preset codes, apply or switch presets with overwrite/merge/skip strategies, and customize CSS variables for theming. - Enforced Composition Rules: Applies critical rules for forms (FieldGroup/Field), chat UI (MessageScroller/Bubble), icons (data-icon), styling (semantic tokens, gap-* spacing), and base-vs-radix API differences. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project config via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes instead of hand-rolled markup. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: add a dialog and card to my project and build a profile settings form with validation states.

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 to preview changes and --diff to compare against existing files before writing.

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 inspect upstream changes per file. 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 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 theme?▼

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. Partial updates support --only theme,font, and preset codes should never be decoded manually.

Why should I avoid space-y and raw color classes in shadcn/ui?▼

shadcn/ui components rely on semantic tokens like bg-primary and text-muted-foreground so themes and dark mode work consistently. Use flex with gap-* for spacing and built-in variants instead of overriding component colors with className.

Does the shadcn CLI support monorepo projects?▼

Yes, all templates except laravel support monorepo scaffolding via the --monorepo flag with init. The CLI uses monorepo-specific template directories such as next-monorepo when the flag is passed.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

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

Community
Advanced
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
dmae97dmae97
130

omk-frontend-implementation

Implement frontend UI components from DESIGN.md with existing design tokens.

Community
Intermediate
DagimAlemayehuuDagimAlemayehuu

shadcn-ui

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

Community
Intermediate