Questions? hello@viberation.devGet supportBlogDocsChangelog

Colour mode

XGitHub
Get started

shadcn/ui Skill

Skills#design#frontend

Add, fix and style shadcn/ui components with the right context.

The official shadcn skill. Your agent manages shadcn components and projects, from adding and searching components to debugging, styling and composing UI, with component docs and usage examples to hand.

Install this skill

npx skills add https://github.com/shadcn/ui --skill shadcn

Runs the open-source skills CLI in your own terminal. It asks which agents to add the skill to. Read what it tells your agent to do before you install it.

Download skill (.zip)

Install for your agent

  • Claude Code

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a claude-code

    Add -g to install it for every project instead.

    Or ask Claude Code to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for Claude Code.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .claude/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .claude/skills/ for this project, or ~/.claude/skills/ for all your projects.

    Picked up in the current session, no restart needed.

    Claude Code skills docs
  • Claude.ai

    Upload the ZIP

    1. In Settings > Capabilities, turn on Code execution and file creation.
    2. Go to Customize > Skills, press +, then Create skill.
    3. Choose Upload a skill and pick the ZIP you downloaded.

    Free, Pro and Max plans. On Team and Enterprise, an owner turns skills on in Organization settings first.

    Claude.ai skills docs
  • ChatGPT

    Upload the ZIP

    1. Open Skills in ChatGPT and select Create.
    2. Select Upload from your computer and pick the ZIP you downloaded.
    3. Wait for ChatGPT's safety scan. A skill marked Needs Review asks you to check it before use.

    Skills that rely on scripts or a terminal may not work unchanged in ChatGPT.

    ChatGPT skills docs
  • Codex

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a codex

    Add -g to install it for every project instead.

    Or ask Codex to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for Codex.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.agents/skills/ for all your projects.

    Restart Codex if the skill does not show up.

    Codex skills docs
  • Cursor

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a cursor

    Add -g to install it for every project instead.

    Or ask Cursor to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for Cursor.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .cursor/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .cursor/skills/ for this project, or ~/.cursor/skills/ for all your projects.

    Run it by typing / and the skill name in chat.

    Cursor skills docs
  • GitHub Copilot

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a github-copilot

    Add -g to install it for every project instead.

    Or ask GitHub Copilot to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for GitHub Copilot.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .github/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .github/skills/ for this project, or ~/.copilot/skills/ for all your projects.

    Works in Copilot CLI, the cloud agent and agent mode in VS Code and JetBrains.

    GitHub Copilot skills docs
  • Antigravity

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a antigravity

    Add -g to install it for every project instead.

    Or ask Antigravity to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for Antigravity.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.gemini/config/skills/ for all your projects.

    Antigravity skills docs
  • Gemini CLI

    Run this in your project

    npx skills add https://github.com/shadcn/ui --skill shadcn -a gemini-cli

    Add -g to install it for every project instead.

    Or ask Gemini CLI to do it

    Install the "shadcn" skill from https://github.com/shadcn/ui for Gemini CLI.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .gemini/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .gemini/skills/ for this project, or ~/.gemini/skills/ for all your projects.

    Run /skills to check it was found.

    Gemini CLI skills docs
Installs
271.7K via skills.sh
GitHub
123.7K stars ↗
Last updated
12 Sept 2026
Licence
MIT

Security checks

Run by independent scanners and published on skills.sh. Their results, not a Viberation review.

  • Gen Agent Trust Hub Pass

    The skill provides a comprehensive interface for managing shadcn/ui components using its official CLI. It includes project context discovery, component documentation fetching, and strict styling rules. Security measures are in place, such as encouraging the use of the CLI over manual file downloads and recommending human review of added components.

    29 Apr 2026

  • Socket Pass

    No alerts

    29 Apr 2026

  • Snyk Warning

    Risk: MEDIUM · 2 issues

    29 Apr 2026

  • Runlayer Pass

    11 files scanned · No issues

    13 Mar 2026

  • ZeroLeaks Pass

    Score: 93/100 · 2 sections analyzed

    15 Apr 2026
What's inside (13 files)
  • agents/openai.yml236 chars
  • cli.md17.2K chars
  • customization.md6.1K chars
  • evals/evals.json6.3K chars
  • mcp.md3.5K chars
  • registry.md8.8K chars
  • rules/base-vs-radix.md6.9K chars
  • rules/chat.md6.9K chars
  • rules/composition.md4.9K chars
  • rules/forms.md4.8K chars
  • rules/icons.md2K chars
  • rules/styling.md4.7K chars
  • SKILL.md19.4K chars

SKILL.md, first part. Shown as plain text.

---
name: shadcn
description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
user-invocable: false
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
---

# shadcn/ui

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.

## Current Project Context

```json
!`npx shadcn@latest info --json`
```

The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.

## Principles

1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.

## Critical Rules

These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.

### Styling & Tailwind → [styling.md](./rules/styling.md)

- **`className` for layout, not styling.** Never override component colors or typography.
- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.

### Forms & Inputs → [forms.md](./rules/forms.md)

- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.

### Component Structure → [composition.md](./rules/composition.md)

- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
- **Button has

Key info

Pricing
Open source
Category
Skills

More in Skills