skills.rest
nexuslabs-ai
nexuslabs-aiOFFICIAL
Explore all skills by this author →
GitHub

shadcn

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

1|1|Updated Dec 18, 2025
Search Tags:#react#cli#component library#tailwind#shadcn#radix#ui composition
One-click install
npx skills add https://github.com/nexuslabs-ai/nexus --skill shadcn-nexuslabs-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/nexuslabs-ai/nexus/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/nexuslabs-ai/nexus --skill shadcn-nexuslabs-ai

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 configuration details. This Skill provides the operational knowledge to add, search, update, and debug shadcn/ui components correctly, avoiding common mistakes like wrong imports, broken composition, or manual registry fetches. ## Core Features & Use Cases - CLI-driven component management: Initialize projects with presets, add components from registries, preview changes with --dry-run and --diff, and smart-merge upstream updates while preserving local edits. - Composition and styling rules: Enforces correct patterns for forms (FieldGroup/Field), overlays, icons (data-icon), semantic colors, and Tailwind class usage with Incorrect/Correct code pairs. - Project context awareness: Reads framework, aliases, Tailwind version, base library (radix vs base), and icon library from the project to generate code that matches the actual setup. - Use Case: A developer asks to add a login form. The Skill checks installed components, fetches docs for Field and Input, composes them with correct validation attributes, and fixes any third-party registry import paths to match the project aliases. ## Quick Start Ask the assistant to add a shadcn/ui component such as "add the dialog and button components to my project" and it will use the CLI and rules to install and compose them correctly.

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, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (npx, pnpm dlx, or bunx), and check installed components first with npx shadcn@latest info.

How do I update shadcn components without losing my changes?▼

Use 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" props, while base uses render, multiple booleans, and array defaultValues. Check the base field via npx shadcn@latest info before writing component code.

Can I use shadcn/ui with Vite or frameworks other than Next.js?▼

Yes, the CLI supports next, vite, start, react-router, and astro templates, all with monorepo support, plus laravel without monorepo support. Create a project with npx shadcn@latest init --name my-app --template vite --preset base-nova.

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

Components rely on semantic CSS variable tokens like bg-primary and text-muted-foreground that switch automatically in dark mode, so raw colors like bg-blue-500 break theming. Use flex with gap-* instead of space-y-*, and built-in variants before custom classes.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
hamzaPixlhamzaPixl
2

admin-dashboard

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

Community
Intermediate
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

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