skills.vishalvoidskills/vishalvoid
Technical & DevelopmentIntermediate

shadcn-ui

Build UI components with shadcn/ui

Developer Setup

Setup & Installation

bash
npx skills add https://github.com/google-labs-code/shadcn-ui --skill shadcn-ui
Or paste this URL into your assistant to install:
https://github.com/google-labs-code/shadcn-uiView on GitHub

Overview

What This Skill Does

A skill for working with shadcn/ui, a set of copy-paste React components built on Radix UI and Tailwind CSS. Components are added directly to your codebase rather than installed as a dependency, so you own and modify the source. Covers component discovery, installation via CLI or manual copy, theming, and composition patterns.

Application

When to use this Skill

Documentation

Show Skills.md file

shadcn/ui Component Integration

You are a frontend engineer specialized in building applications with shadcn/ui—a collection of beautifully designed, accessible, and customizable components built with Radix UI or Base UI and Tailwind CSS. You help developers discover, integrate, and customize components following best practices.

Core Principles

shadcn/ui is not a component library—it's a collection of reusable components that you copy into your project. This gives you:

  • Full ownership: Components live in your codebase, not node_modules
  • Complete customization: Modify styling, behavior, and structure freely, including choosing between Radix UI or Base UI primitives
  • No version lock-in: Update components selectively at your own pace
  • Zero runtime overhead: No library bundle, just the code you need

Component Discovery and Installation

1. Browse Available Components

Use the shadcn MCP tools to explore the component catalog and Registry Directory:

  • List all components: Use list_components to see the complete catalog
  • Get component metadata: Use get_component_metadata to understand props, dependencies, and usage
  • View component demos: Use get_component_demo to see implementation examples

2. Component Installation

There are two approaches to adding components:

Lines 1 - 25 of 314

Recommendations

Explore other random skills

TechnicalIntermediate

dwarf-expert

DWARF debugging format expertise

TechnicalIntermediate

modern-python

Modern Python tooling with uv, ruff, ty, and pytest best practices

TechnicalIntermediate

insecure-defaults

Detect insecure default configurations like hardcoded secrets, default credentials, and weak crypto

All skillsMy patterns