skills.rest
erikstmartin
erikstmartinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-ui

Configure and use shadcn/ui components in React projects.

16|9|Updated Nov 6, 2013
Search Tags:#theming#documentation#react#shadcn-ui#ui-components#setup-guide
One-click install
npx skills add https://github.com/erikstmartin/dotfiles --skill shadcn-ui-erikstmartin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/erikstmartin/dotfiles/tree/main/skills/catalog/frontend/shadcn-ui
Command: npx skills add https://github.com/erikstmartin/dotfiles --skill shadcn-ui-erikstmartin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

shadcn/ui integration in React projects can be complex and time-consuming without a structured workflow. This skill provides clear guidance to setup, install, configure, and customize shadcn/ui components across modern frameworks and dev environments.

Core Features & Use Cases

  • Setup Workflow for new projects and existing apps, including initialization and adding components.
  • Component Integration Workflow detailing how components are copied into your project, imported, and connected with Radix/Tailwind styling.
  • Customization Workflow covering theming, CSS variables, and extending components with custom variants.
  • Complete Examples demonstrating common UI patterns like forms, dialogs, charts, and badges, with practical usage scenarios.
  • Common Pitfalls and troubleshooting tips to avoid stale code, missing client directives, or misconfigured aliases.

Quick Start

Install shadcn/ui in your project with the CLI, initialize the setup, and start adding components.

Frequently Asked Questions about shadcn-ui

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

FAQPage Schema
How do I set up shadcn/ui components in a React project?▼

To set up shadcn/ui in a React project, use the CLI to initialize the configuration, then add components. This workflow copies components directly into your codebase for integration with Radix and Tailwind styling.

Can I use shadcn/ui with Next.js, Vite, or Remix?▼

Yes, you can configure and use shadcn/ui across Next.js, Vite, or Remix projects. The setup workflow supports initializing and adding components within these modern development environments.

How does component integration work with shadcn/ui?▼

shadcn/ui integration works by copying component code directly into your project, importing it, and connecting it with Radix primitives and Tailwind styling. This gives you full control over the source code.

What is the best way to customize shadcn/ui themes and CSS variables?▼

The best way to customize shadcn/ui themes is by modifying CSS variables and extending components with custom variants. This approach allows you to adapt the styling architecture to your design requirements.

Why are my shadcn/ui components not working correctly?▼

shadcn/ui components might fail due to common pitfalls like stale code, missing client directives, or misconfigured aliases. Troubleshooting these configuration issues ensures proper rendering and functionality.

Related Skills

Explore More Software Engineering Skills→
HokageZHokageZ
2

shadcn-ui-expert

Develop accessible React components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
jal-cojal-co
35

shadcn-ui

Implement shadcn/ui components in React with Tailwind CSS and Radix UI.

Community
Intermediate
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
hii-saikrishnahii-saikrishna

animated-component-libraries

Provide pre-built animated React components for UI development.

Community
Advanced