skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

shadcn

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

3|Updated Apr 20, 2026
Search Tags:#theming#frontend#react#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill shadcn-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill shadcn-langgenius

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 (aliases, Tailwind version, icon library, base vs radix primitives). This Skill eliminates guesswork by injecting live project context and enforcing correct usage patterns, so generated UI code compiles and follows accessibility and styling conventions on the first try. ## Core Features & Use Cases - CLI-driven component management: init projects with presets, add/search/view components from registries, preview changes with --dry-run and --diff, and smart-merge upstream updates without losing local customizations. - Enforced composition and styling rules: FieldGroup-based forms, group-wrapped menu items, semantic color tokens, data-icon attributes, and base-vs-radix API differences, each backed by Incorrect/Correct code pairs. - Preset and theme workflows: apply named presets or preset codes, switch themes with overwrite/partial/merge/skip strategies, and customize CSS variables in the project's Tailwind config. - Use Case: A developer asks to build a settings form in a Next.js project. The Skill reads the project context, confirms installed components, fetches docs for Field and ToggleGroup, and generates code using the project's actual aliases and icon library. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form, and it will run the shadcn CLI and generate compliant code.

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). 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, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render, a multiple boolean, items props on Select, and scalar Slider values. Check the base field via npx shadcn@latest info.

How do I apply or switch a shadcn preset theme?▼

Use npx shadcn@latest apply --preset <code> to overwrite an existing project's theme, fonts, and components. For partial updates add --only theme or --only font. To keep existing components, run init --preset <code> --force --no-reinstall instead.

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

The skill's styling rules require flex with gap-* instead of space-x-*/space-y-* for consistent spacing, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens automatically handle dark mode through CSS variables.

Can I use community registries like Magic UI with the shadcn CLI?▼

Yes, add registry-prefixed items such as npx shadcn@latest add @magicui/shimmer-button. Afterward, verify the added files because third-party registries may use hardcoded import paths or a different icon library than your project configuration.

Related Skills

Explore More Software Engineering Skills→
garochee33garochee33
3

shadcn

Configure shadcn/ui CLI setup and component installation in React projects.

Community
Advanced
offers-pngoffers-png

fullstack-js

Define architecture, data modeling, and end-to-end conventions for full-stack JavaScript applications.

Community
Advanced
Arcanada-oneArcanada-one
11

frontend-ui

Verify frontend UI rendering across themes, viewports, and localization contexts.

Official
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate