skills.rest
garochee33
garochee33COMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design, install, and troubleshoot shadcn/ui components without guessing the right CLI flags, theming setup, or component composition patterns.

Core Features & Use Cases

  • CLI setup and component installation: Initialize shadcn/ui non-interactively and add components, registries, or full templates correctly.
  • Theming and design-system guidance: Configure Tailwind variables, dark mode, fonts, spacing, and registry presets for consistent product UI.
  • Component composition and troubleshooting: Apply best-practice patterns for dialogs, tables, forms, sheets, commands, and custom variants while avoiding common implementation mistakes.

Quick Start

Use the shadcn skill to set up a new project with the correct shadcn/ui configuration and add the components needed for a dark-mode dashboard.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install shadcn/ui components using the CLI in a React project?▼

To install shadcn/ui components, you initialize the project non-interactively using the CLI, configure the components.json file, and add components or registries while ensuring Tailwind token alignment for consistent styling.

Does shadcn/ui work with Vite, Next.js, and Astro workflows?▼

Yes, shadcn/ui works with Next.js, Vite, React Router, Astro, Laravel, and Tanstack Start workflows. The Skill guides correct CLI usage and components.json configuration across these platforms for dashboards and auth screens.

How do I configure dark mode and Tailwind variables for a shadcn dashboard?▼

Configuring dark mode and Tailwind variables for a shadcn dashboard involves setting up Tailwind CSS variables, spacing, and fonts. The Skill provides design-system guidance for applying registry presets and consistent product theming.

What is the best way to compose shadcn dialogs, forms, and admin tables?▼

The best way to compose shadcn dialogs, forms, and admin tables is by applying accessible component patterns. The Skill helps troubleshoot UI composition errors and implement custom variants while avoiding common mistakes.

Why does my shadcn CLI setup fail when adding custom registries?▼

shadcn CLI setup fails when components.json configuration is incorrect or Tailwind tokens are misaligned. The Skill troubleshoots these setup errors, ensuring correct non-interactively initialized registries and component installations.

Can I use shadcn for building accessible auth screens and admin tables?▼

Yes, you can use shadcn for building accessible auth screens and admin tables. The Skill applies best-practice component composition patterns for forms, sheets, commands, and tables within React-based project workflows.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
Veloxia-agencyVeloxia-agency

ckm:ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
endorphin-aiendorphin-ai
3

react

Develop React frontend applications with TypeScript, Vite, and TanStack Query.

Official
Advanced
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced