# Shadcn

> Use when: add, customize, or extend shadcn/ui components with correct Tailwind and theming setup.

- Skill: `kimtth/shadcn` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/shadcn`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/shadcn/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/shadcn

---


Goal: use shadcn/ui as owned source, customized cleanly.

Use for:
- installing and wiring shadcn/ui components
- customizing styling, variants, and theme tokens
- composing primitives into app-specific components

Workflow:
1. Initialize shadcn and confirm Tailwind + path aliases.
2. Add only the components you need via the CLI.
3. Treat generated files as your code; edit them directly.
4. Customize via theme CSS variables and component variants.
5. Compose primitives into higher-level app components.
6. Re-add or diff carefully when upgrading components.

Patterns:
- own the component code; do not fight the abstraction
- theme through CSS variables, not per-instance overrides
- extend variants with the existing variant helper
- keep accessibility props from the primitives intact

Rules:
- customize in the component source, not with override hacks
- keep the design-token layer as the single source of truth
- do not hand-edit in ways that block future updates blindly
- preserve the underlying primitive's a11y behavior