Which React frameworks are supported by this Claude skill?

The skill provides optimized paths for Vite, Next.js, Remix, Astro, TanStack Router, and Laravel, as well as manual installation instructions.

Does the skill support complex components like Forms?

Yes, it includes documentation and patterns for the Form component, integrating seamlessly with React Hook Form and Zod for validation.

Does this skill install shadcn/ui as a standard npm dependency?

No, following the shadcn/ui philosophy, this skill helps Claude copy component source code directly into your project's components folder for full ownership and customization.

Can Claude help me customize the theme of my shadcn components?

Yes, Claude can modify your global CSS variables and components.json file to adjust colors, border radius, and fonts to match your brand identity.

How do I add a specific component using Claude?

You can ask Claude to 'add the button and card components,' and it will use the CLI command 'npx shadcn@latest add button card' to fetch the code.

shadcn/ui Component Library

Name: shadcn/ui Component Library
Author: involvex

byinvolvex

0•

设计工具

Builds beautiful, accessible React components using Tailwind CSS and Radix UI primitives with a copy-and-paste philosophy.

This skill enables Claude to seamlessly integrate and manage the shadcn/ui component library within your frontend projects. It provides comprehensive knowledge of the shadcn CLI for initializing projects and adding components, along with framework-specific installation patterns for Next.js, Vite, Remix, and Astro. By leveraging this skill, Claude can help you build high-quality, accessible user interfaces that follow the 'Open Code' principle, allowing for deep customization of components directly within your source code while maintaining production-grade design defaults.

主要功能

01Theme customization and design token management via components.json

02Direct code injection for complex components like Forms, Dialogs, and Data Tables

030 GitHub stars

04Automated CLI command execution for adding and updating UI components

05Framework-specific configuration for Next.js, Vite, Remix, and Astro

06Tailwind CSS and Radix UI implementation patterns for accessibility

使用场景

01Rapidly prototyping a modern web application with a professional design system

02Configuring a new project with TanStack Router and shadcn/ui pre-installed

03Converting existing UI elements to standardized, accessible shadcn/ui components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add involvex/involvex-claude-marketplace shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill