Skip to content
Get packs

shadcn/ui Component Integration

Guides an agent to discover, install, and customize shadcn/ui React components in your project

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
7 files

What it does

When installed, the agent acts like a frontend engineer experienced with shadcn/ui, a collection of accessible, Tailwind-styled React components that are copied into your codebase rather than imported as a library. It knows how to browse the component catalog through shadcn tools, run the shadcn CLI to add components, set up a project's configuration, and customize styling and variants following the skill's best-practice patterns. It also includes a bundled script that checks whether a project is correctly set up for shadcn/ui (config file, Tailwind, path aliases, global CSS).

Great for

  • React or Next.js developers adding shadcn/ui components to an existing Tailwind project
  • Teams standardizing how components are customized and organized in a codebase
  • Designers or builders who want an agent to assemble common UI blocks such as login forms or dashboards

Skip it if

  • Projects that do not use React or Tailwind CSS, since the components depend on both (the agent may still generate incorrect code)
  • Situations where the agent should run commands without review, because the skill allows Bash and runs shell and npx commands that modify project files

Try asking

  • “Set up shadcn/ui in my existing Next.js project and add button, card and dialog components”
  • “Create a login form block using shadcn/ui inputs and labels with react-hook-form validation”
  • “Customize the primary color theme in globals.css to match our brand”
  • “Check whether my project is correctly configured for shadcn/ui”
Step-by-step guide: how to use shadcn/ui Component IntegrationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the Apache-2.0 licence and an attribution note.

    shadcn-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip shadcn-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip shadcn-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run the verify script or ask the agent to check setup before adding many components, so configuration problems surface early
  • Review commands the agent proposes (npx shadcn add/init/create) and the files it writes before accepting them, since they change your project
  • Give the agent your framework, style choice and Tailwind version up front so it picks the right configuration

What's inside

  • README.md
  • resources/component-catalog.md
  • resources/customization-guide.md
  • resources/migration-guide.md
  • resources/setup-guide.md
  • scripts/verify-setup.sh
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.