skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Install, configure, and theme shadcn/ui components in React apps.

15|2|Updated May 23, 2026
Search Tags:#shadcn/ui#dark mode#css variables#radix ui#react-hook-form#accessible forms#tailwind css v4
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill shadcn-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/shadcn
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill shadcn-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of building and theming accessible, consistent UI components without guessing import paths, spacing rules, or Radix/shadcn composition details, so you can avoid broken ARIA wiring and inconsistent styling.

Core Features & Use Cases

  • Install & configure shadcn workflows using components.json, npx shadcn init, and npx shadcn add for copy-paste UI components.
  • Theme with CSS variables (Tailwind v4) including dark mode via the class="dark" strategy and semantic token usage like bg-background / text-muted-foreground.
  • Build forms correctly with React Hook Form + Zod patterns, ensuring shadcn <FormControl>, <FormField>, and ARIA/validation wiring works reliably.

Quick Start

Load the shadcn skill and configure your project using the relevant setup reference for components.json, then ask for the component(s) you need to add and how to theme them for light/dark mode.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I configure shadcn/ui dark mode with Tailwind CSS v4?▼

To configure shadcn/ui dark mode with Tailwind CSS v4, apply the `class="dark"` strategy and map semantic color tokens like `bg-background` and `text-muted-foreground` using CSS variables for consistent light and dark theming.

How do I build accessible forms with shadcn/ui and React Hook Form?▼

Build accessible forms with shadcn/ui and React Hook Form by wiring `<FormControl>`, `<FormField>`, and `<FieldGroup>` slots correctly, using Zod for validation to ensure ARIA patterns remain intact and reliable.

What is the correct way to compose Radix UI primitives in shadcn/ui?▼

Correctly composing Radix UI primitives in shadcn/ui requires using proper slot wiring and accessible Titles to avoid breaking Radix accessibility patterns when selecting component patterns like Dialog, Sheet, or Card compositions.

How do I install and add shadcn/ui components to a React app?▼

Install and add shadcn/ui components to a React app by configuring `components.json` and running `npx shadcn init` followed by `npx shadcn add` to copy-paste design-system style UI components.

Why does my shadcn/ui component break Radix accessibility patterns?▼

Your shadcn/ui component breaks Radix accessibility patterns when composition rules are ignored, specifically by missing proper slot wiring for `<FormControl>` or omitting accessible Titles in Dialog and Sheet overlays.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
try-workstry-works
95

ui-design-system

Develop UI components and design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced
haryelramalhoharyelramalho

shadcn-ui

Implement accessible shadcn/ui component patterns for React projects.

Community
Advanced