All skills
shadcn avatar

/shadcn

@6cd3f4c
by shadcnshadcn/ui125k stars
11,819

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".

Use this Skill: https://skilld.dev/gh/shadcn/ui/shadcn

This session only. Nothing lands on disk.

mcp.md

≈878 tokens on demand. Your agent reads this file only when SKILL.md points to it.

shadcn MCP Server

The CLI includes an MCP server that lets AI assistants search, browse, view, and install items from registries.


Setup

shadcn mcp        # start the MCP server (stdio)
shadcn mcp init   # write config for your editor

Editor config files:

Editor Config file
Claude Code .mcp.json
Cursor .cursor/mcp.json
VS Code .vscode/mcp.json
OpenCode opencode.json
Codex ~/.codex/config.toml (manual)

Tools

Tip: MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use npx shadcn@latest info — there is no MCP equivalent.

shadcn:get_project_registries

Returns registry names from components.json. Errors if no components.json exists.

Input: none

shadcn:list_items_in_registries

Lists all items from one or more registries. Registries can be configured namespaces such as @acme, public GitHub sources such as owner/repo, or registry catalog URLs. Omit registries to list from every registry configured in components.json.

Input: registries (string[], optional — omit for all configured), types (string[], optional — e.g. ["ui", "block"]), limit (number, optional, defaults to 100), offset (number, optional)

shadcn:search_items_in_registries

Fuzzy search across registries. Registries can be configured namespaces, public GitHub sources, or registry catalog URLs. Omit registries to search every registry configured in components.json — e.g. "find me a hero" across all configured registries.

Input: registries (string[], optional — omit for all configured), query (string), types (string[], optional — e.g. ["ui", "block"]), limit (number, optional, defaults to 100), offset (number, optional)

shadcn:view_items_in_registries

View item details including full file contents.

Input: items (string[]) — e.g. ["@shadcn/button", "@shadcn/card", "owner/repo/item"]

shadcn:get_item_examples_from_registries

Find usage examples and demos with source code. Omit registries to search every registry configured in components.json.

Input: registries (string[], optional — omit for all configured), query (string) — e.g. "accordion-demo", "button example"

shadcn:get_add_command_for_items

Returns the CLI install command.

Input: items (string[]) — e.g. ["@shadcn/button"]

shadcn:get_audit_checklist

Returns a checklist for verifying components (imports, deps, lint, TypeScript).

Input: none


Configuring Registries

Namespaced and authenticated registries are set in components.json. The @shadcn registry is always built-in. Public GitHub registries can also be used directly as owner/repo registry sources when the repository has a root registry.json; they do not need components.json configuration.

{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json",
    "@private": {
      "url": "https://private.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
    }
  }
}
  • Names must start with @.
  • URLs must contain {name}.
  • ${VAR} references are resolved from environment variables.

Community registry index: https://ui.shadcn.com/r/registries.json

Source: SKILL.md on GitHub

1 warning16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    This is the official skill for managing shadcn/ui components and projects. It utilizes the shadcn CLI to synchronize project context, search registries, and install UI components. The skill provides detailed architectural and styling rules to ensure the agent generates high-quality code consistent with shadcn/ui principles. No security risks were identified beyond the standard operations of the development tools it manages.

  • Socket16d

    1 alert: gptAnomaly

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    11 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 6cd3f4c. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 10 hours ago.

Activeupdated 2 months ago
What it can do
Runs commands
user-invocable
false
All 3 allowed tools
Bash(npx shadcn@latest *)Bash(pnpm dlx shadcn@latest *)Bash(bunx --bun shadcn@latest *)

README badge

README badge for shadcn/ui

Manages shadcn/ui components in a project—adding, searching, updating, and composing UI elements via the CLI. Provides component documentation, usage examples, and enforces shadcn patterns for forms, layouts, styling, and accessibility. Works with any project that has a components.json file or uses shadcn/ui presets.

Generated from the current SKILL.md.

Does this skill work with all shadcn/ui projects?
Yes, it applies to any project with a components.json file and triggers on shadcn init, preset codes, or direct shadcn CLI commands. It uses the project's configured package manager (npm, pnpm, or bun).
Can I use this to add custom components to my shadcn project?
No. This skill manages adding and composing official shadcn components and those from community registries. For custom components, you write the code yourself; the skill helps integrate them with the existing component system.
Does this skill handle styling and Tailwind customization?
It enforces shadcn styling rules (semantic colors, gap-* over space-*, no manual dark: overrides) but does not directly edit Tailwind config. You control the tailwind.config.js or v4 CSS file; the skill guides correct usage.
What happens if I have a component preset code?
Never decode or build preset URLs manually. Use `npx shadcn@latest preset decode <code>`, `preset url <code>`, `preset open <code>`, or `npx shadcn@latest apply <code>` to apply an existing preset to your project.

Generated from the current SKILL.md. These answers refresh after source changes.