skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

shadcn

Add, compose, style, and debug shadcn/ui components in React projects.

Updated Mar 12, 2026
Search Tags:#frontend#react#design system#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill shadcn-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/shadcn
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill shadcn-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building React UI with shadcn/ui requires knowing the correct CLI commands, component composition rules, and project-specific configuration (aliases, icon library, base vs radix primitives). This Skill eliminates guesswork and common mistakes like wrong import paths, missing accessibility titles, or invalid Tailwind patterns. ## Core Features & Use Cases - CLI-driven component management: Search registries, add components, preview changes with dry-run/diff, and smart-merge upstream updates while preserving local modifications. - Enforced composition and styling rules: FieldGroup-based forms, semantic color tokens, gap-* spacing, data-icon attributes, and correct base-vs-radix API usage with Incorrect/Correct code pairs. - Preset and theme workflows: Apply, decode, and switch presets (overwrite, partial, merge, skip) and customize CSS variables for Tailwind v3/v4. - Use Case: When asked to build a settings form, the Skill reads the project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's icon library and aliases. ## 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 in my Next.js 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 React project?▼

Run npx shadcn@latest add followed by 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 update shadcn/ui components without losing local 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"/"multiple" props, while base uses render props, multiple booleans, array defaultValues, and an items prop on Select.

Can I use shadcn/ui with Tailwind CSS v4?▼

Yes, shadcn/ui supports both Tailwind v3 and v4. Check the tailwindVersion field from npx shadcn@latest info: v4 registers custom colors in @theme inline blocks, while v3 uses tailwind.config.js. Always edit the existing global CSS file.

Why do my shadcn/ui form components fail accessibility checks?▼

Dialog, Sheet, and Drawer require Title components (DialogTitle, SheetTitle, DrawerTitle) for accessibility, which can be visually hidden with className="sr-only". Also ensure items sit inside their Group components and Avatar includes AvatarFallback.

How do I apply or switch shadcn/ui presets?▼

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. Inspect codes with preset decode, and never decode preset strings manually since they are opaque.

Related Skills

Explore More Software Engineering Skills→
designbycodedesignbycode

shadcn

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

Official
Advanced
hamzaPixlhamzaPixl
2

admin-dashboard

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

Community
Intermediate
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

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

Community
Intermediate