skills.rest
jubalm
jubalmCOMMUNITY
Explore all skills by this author โ†’
GitHub

shadcn/ui Component Management

Add, list, view, and search shadcn/ui components via CLI commands.

1|Updated Oct 1, 2023
Search Tags:#react#CLI#usage#shadcn-ui#import#component-management
One-click install
npx skills add https://github.com/jubalm/dotfiles --skill shadcn-ui-component-management
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: shadcn/ui Component Management
Source: https://github.com/jubalm/dotfiles/tree/main/home/.claude/skills/shadcn-components
Command: npx skills add https://github.com/jubalm/dotfiles --skill shadcn-ui-component-management

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you add, import, and manage shadcn/ui components after initialization. It covers CLI commands for adding components, viewing a catalog, and handling dependencies, enabling incremental, lean component growth.

Core Features & Use Cases

  • Add single component: npx shadcn@latest add button
  • Add multiple components: npx shadcn@latest add button card input
  • View & list: npx shadcn@latest list and npx shadcn@latest view button
  • Import usage: Import components in React/TSX files and reuse code samples

Quick Start

Install a component with the CLI, for example: npx shadcn@latest add button, then import it from '@/components/ui/button'.

Frequently Asked Questions about shadcn/ui Component Management

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to my React project after initialization?โ–ผ

Add components using the CLI command npx shadcn@latest add [component-name], for example npx shadcn@latest add button. The command installs the component code into your project's components/ui directory and automatically handles dependencies like clsx and tailwind-merge.

Can I add multiple shadcn/ui components at once?โ–ผ

Yes, add multiple components in a single command: npx shadcn@latest add button card input. You can also use npx shadcn@latest add --all to install all available components from the catalog.

How do I import and use shadcn/ui components in my React files?โ–ผ

Import components from your project's component directory using the alias path: import { Button } from '@/components/ui/button'. Use them as standard React components in your TSX or JSX files with provided code samples.

What do I need to set up before managing shadcn/ui components?โ–ผ

Run npx shadcn-ui@latest init to generate components.json, set up the utils.ts file, and configure Tailwind CSS. This initialization creates the foundation required for adding and managing individual components.

Can I view available shadcn/ui components and their code before installing?โ–ผ

Use npx shadcn@latest list to see all installed components and npx shadcn@latest view [component-name] to preview component code and documentation before adding it to your project.

Does shadcn/ui automatically install required dependencies when I add components?โ–ผ

Yes, adding components automatically installs required dependencies including Radix UI primitives, react-hook-form, clsx, and tailwind-merge. Your package.json updates accordingly with each component addition.

Related Skills

Explore More Software Engineering Skillsโ†’
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
IDEA-on-ActionIDEA-on-Action

react-component

Generate React component files with PascalCase names and shadcn/ui integration.

Official
Intermediate
fiatkongenfiatkongen

react-tailwind-v4-components

Standardize React UI components with Tailwind v4, shadcn/ui, and Radix primitives.

Community
Basic
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate