Skip to content
Get packs

Guide · Agent skill

How to use the shadcn/ui Component Integration agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The shadcn-ui skill is an instruction package that makes an AI agent behave like a frontend engineer experienced with shadcn/ui, a set of accessible, Tailwind-styled React components that are copied into your codebase rather than imported from a library. This guide is for developers who already have a React or Next.js project with Tailwind and want help adding and customizing components. By the end you will know what the skill does, how to install it, how to ask for work in plain language, and what to check before letting an agent change your files.

shadcn/ui Component Integrationgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Download and unzip the skill. Download the ZIP from this page and unzip it. Place the folder in .claude/skills/ in your project or in ~/.claude/skills/ for all projects.
  2. 2Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
  3. 3Confirm your project meets the requirements. Make sure you have Node.js with npx, a React project using Tailwind CSS 3.0 or later, and a primitives layer of Radix UI or Base UI.
  4. 4Initialize shadcn/ui configuration. For an existing project, run npx shadcn@latest init to create components.json. For a new project, use npx shadcn@latest create.
  5. 5Ask for a component in plain language. Describe what you want, such as adding a data table or a login form, and the agent will use the skill's workflow.
  6. 6Review the commands and changes. Check each proposed npx or shell command and the files it changes before approving it.
  7. 7Verify the setup. Run the bundled scripts/verify-setup.sh to check the config file, Tailwind, path aliases and global CSS.

What the skill makes the agent do

Once installed, the agent follows the skill's guidance for browsing the shadcn/ui component catalog, running the shadcn CLI to add components, setting up a project's configuration, and customizing styling and variants using the skill's best-practice patterns. It also covers composing common UI blocks such as login forms, dashboards and sidebars.

The skill includes a bundled script, scripts/verify-setup.sh, that checks whether a project is correctly set up for shadcn/ui, covering the config file, Tailwind, path aliases and global CSS.

  • Browse components with shadcn MCP tools such as list_components and get_component_metadata
  • Add components with npx shadcn@latest add [component-name]
  • Create or initialize configuration with components.json
  • Customize theme variables in app/globals.css and variants with class-variance-authority
  • Check project setup with the bundled verify script

Install the skill from the download

Download the skill ZIP from this page and unzip it. To make it available in a single project, place the unzipped folder in that project's .claude/skills/ directory. To make it available across your projects, place it in ~/.claude/skills/.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.

  • Project only: .claude/skills/ inside your project folder
  • All projects: ~/.claude/skills/ in your home folder
  • Claude apps: Settings → Capabilities → Skills, then upload

Check the requirements before you start

The skill assumes a React project with Tailwind CSS, and the components depend on both. Node.js with npm and npx is needed to run the shadcn CLI and the verify script. Your project also needs a primitives layer (Radix UI or Base UI), class-variance-authority, clsx and tailwind-merge. The CLI can install these for you, or you can add them manually.

React 18 or later and Tailwind CSS 3.0 or later are the stated minimums. The shadcn MCP tools for catalog browsing are optional.

  • Node.js and npm/npx
  • React 18+ project
  • Tailwind CSS 3.0+
  • Radix UI or Base UI primitives
  • class-variance-authority, clsx and tailwind-merge
  • shadcn MCP tools (optional)

Trigger the skill with natural requests

You do not need a special command. Describe the task in plain language and the agent will use the skill when the request matches its purpose. Name the component or outcome you want and mention your framework if it is not obvious.

The skill's README includes example prompts you can adapt.

  • Help me set up shadcn/ui in my Next.js project
  • Add a data table component with sorting and filtering to my app
  • Show me how to customize the button component with a new variant
  • Create a login form using shadcn/ui components with validation
  • Build a dashboard layout with sidebar navigation using shadcn/ui blocks
npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global

Add and customize components

The recommended way to add a component is the shadcn CLI. It downloads the source, adapts it to your Radix or Base UI config, installs dependencies, places files in components/ui/ and updates components.json. Custom wrappers belong in components/ rather than components/ui/, so you can keep the generated files separate from your own code.

For styling, edit the CSS variables in app/globals.css rather than changing every component. Use class-variance-authority for variants and the cn() helper to merge classes.

  • Keep wrapper components in components/, not components/ui/
  • Keep ARIA attributes and keyboard handlers when you customize
  • Use the cn() helper from lib/utils.ts for class merging
npx shadcn@latest add [component-name]

Safety notes: scripts, shell commands and network

This skill runs scripts and uses the network. Its allowed tools include Bash, and it runs shell and npx commands that modify project files. The CLI downloads component source code from the internet. Treat the agent as a contractor with terminal access: read the commands it proposes, and work in a version-controlled project so you can review and revert changes.

Do not let the agent run commands without review, especially when it is asked to change many files at once.

  • Review each npx and shell command before it runs
  • Use git or another version control system so changes can be reverted
  • Read scripts/verify-setup.sh before running it if you want to know exactly what it checks

What people use it for

  • Setting up shadcn/ui in an existing Next.js project with Tailwind
  • Adding a data table, dialog or accordion to an app using the CLI
  • Creating a custom button variant with class-variance-authority
  • Assembling a login form or dashboard layout from shadcn/ui blocks
  • Standardizing how a team wraps and organizes components in components/

Frequently asked questions

Is the shadcn-ui skill free to use?

The skill is published under the Apache-2.0 licence in the google-labs-code/stitch-skills repository. The source does not list pricing for the skill itself, so check the licence and any costs of your own agent tool before use.

How do I install the shadcn-ui skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for all projects or into a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings, then Capabilities, then Skills.

What does the shadcn-ui skill need to work?

It needs Node.js with npm and npx, a React project (React 18+), Tailwind CSS 3.0+, Radix UI or Base UI primitives, and class-variance-authority, clsx and tailwind-merge. The shadcn MCP tools for catalog browsing are optional.

Can I use shadcn/ui without React or Tailwind?

The components depend on both React and Tailwind CSS, so the skill is not meant for projects that use neither. The agent may still generate incorrect code in those projects.

How is shadcn/ui different from a normal component library?

shadcn/ui components are copied into your codebase, in components/ui/, rather than installed in node_modules. This gives you full ownership and lets you change styling and behaviour freely.

Why does the verify script fail or report problems?

The bundled scripts/verify-setup.sh checks the config file, Tailwind, path aliases and global CSS. The skill's troubleshooting notes suggest checking components.json aliases, tsconfig.json paths for @, and that globals.css is imported in your root layout.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits React or Next.js developers with an existing Tailwind project who want an agent to add and customize shadcn/ui components consistently. It is a poor fit for projects without React or Tailwind, and for anyone who wants an agent to run shell and npx commands without reviewing them.

Download the skill