How do I add a new component using this skill?

The skill helps you execute the 'npx shadcn@latest add' command, which downloads the source code, installs peer dependencies, and updates your project configuration automatically.

What primitives are used for accessibility?

Components are built on top of Radix UI or Base UI primitives, ensuring high-quality keyboard navigation, screen reader support, and focus management out of the box.

Does this skill support React Server Components (RSC)?

Yes, it assists with project initialization and component configuration specifically optimized for React Server Components and modern frameworks like Next.js.

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

shadcn/ui is not a library you install via npm; it is a collection of components that you copy directly into your project, giving you full ownership and customization control over the source code.

Can I use this skill to customize my application's theme?

Yes, the skill provides guidance on modifying CSS variables in your global stylesheet and configuring Tailwind to match your brand's specific visual requirements.

shadcn/ui Component Integration

Name: shadcn/ui Component Integration
Author: google-labs-code

bygoogle-labs-code

•

2,093

•

Design Tools

Streamlines the discovery, installation, and customization of accessible shadcn/ui components and UI blocks within React projects.

This skill empowers developers to seamlessly integrate shadcn/ui—a collection of reusable, copy-paste components built on Radix UI and Tailwind CSS—directly into their codebase. It provides expert guidance on component discovery via MCP tools, automated installation using the shadcn CLI, and advanced customization patterns including theming with CSS variables and variant logic with class-variance-authority. By emphasizing full ownership and accessibility, it helps build high-quality, production-ready frontend interfaces without the overhead or version lock-in of traditional component libraries.

Key Features

01Advanced theme customization using Tailwind CSS variables and visual style configurations

02Discovery of components, implementation demos, and metadata using specialized MCP tools

03Support for complex UI blocks including dashboards, authentication flows, and sidebars

04Automated component installation and dependency management via shadcn CLI integration

05Best practices for maintaining accessibility standards and building custom component variants

062,093 GitHub stars

Use Cases

01Rapidly prototyping production-grade layouts using pre-configured UI blocks and design patterns

02Initializing a new React or Next.js project with a custom-themed design system

03Adding complex, accessible UI elements like Data Tables, Dialogs, or Calendars to existing applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add google-labs-code/stitch-skills shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill