shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you create a modal. There are a few approaches you might consider - you could use React's built-in context for state management, or look into libraries that handle modals. You'll need to think about accessibility features like focus trapping and keyboard handling. It might be helpful to also consider your styling preferences. Would you like me to explain some options, or do you have a specific design system in mind? There are several ways to approach this depending on your project structure.
SHADCN/UI MODAL COMPONENT Structure: Use Sheet or Dialog component from shadcn/ui base - Dialog preferred for centered overlays, Sheet for slide-outs. Build steps: 1. Import Dialog component and DialogContent/DialogHeader/DialogFooter subcomponents 2. Create a state hook for open/closed 3. Add Dialog trigger and content wrappers 4. Implement scrim (Backdrop) - automatically managed by Dialog 5. Add keyboard escape handler and outside click dismissal via dialog library Accessibility built-in: • Focus trap on open • Escape key closes automatically • ARIA roles on all interactive elements • Keyboard navigation through form fields Customization patterns: • Override via className prop for width/sizing • Use DialogHeader for title and close button • Chain with Button and Input components from same library • Apply your brand colors through shadcn/ui CSS variables Example: Sheet component wraps content; onOpenChange handler manages state; className="w-96 rounded-lg" sets width and border radius.
About this skill
Your shadcn colors vanished after the Tailwind v4 upgrade. The page stops responding to clicks after a dialog closes. Claude keeps importing components from a package that doesn't exist. This skill makes Claude work with shadcn/ui as owned source code. Claude checks your setup first, then writes components, variants, and theme tokens that fit the library's own patterns.
What it does
- Reads your Tailwind version from your code and writes matching theme CSS: oklch tokens with
@theme inlinefor v4, HSL channels with tailwind.config for v3 - Adds brand colors as complete token pairs across light mode, dark mode, and the Tailwind mapping, so nothing breaks in one mode
- Decides where each change belongs: a cva variant in the
ui/file, a className at the call site, or a new composed component - Picks the right primitive for the job: AlertDialog for destructive confirms, Popover + Command for comboboxes, Drawer or Sheet for panels
- Fixes known Radix problems: the page staying unclickable after a dialog opened from a dropdown, Select's empty-value error, missing dialog titles
- Wires forms with react-hook-form and zod correctly, including non-native inputs like Select and Checkbox
What you get
Working code with file paths and the CLI commands to run. You also get a short note on any non-obvious choices and a list of things to check in the browser (keyboard, focus, dark mode).
Best for
React and Next.js developers building or maintaining apps with shadcn/ui, especially teams adding a brand theme, upgrading to Tailwind v4, or cleaning up drift between components.
SKILL.md preview
---
name: shadcn-ui-components-theming
description: Builds, customizes, themes, and debugs React UI with shadcn/ui as designed. Components live in your repo and are built from Radix primitives. Variants use cva. Themes use CSS variable token pairs, written correctly for Tailwind v3 or v4. Use when the user says "add a shadcn component", "build this form with shadcn", "make a combobox with shadcn", "add our brand color to shadcn", "my shadcn colors disappeared after upgrading to Tailwind v4", "page stops being clickable after my dialog closes", "Select throws an error about empty string value", or "review my shadcn components".
---
# shadcn/ui Component Building and Theming
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
Design-Matched SEO Pages and Graded Site Audit
Add about, team, or testimonial pages that match your site's design, with unique meta, canonicals, and JSON-LD, plus a graded audit.