skills.rest
elcokiin
elcokiinCOMMUNITY
Explore all skills by this author →
Website𝕏@elcokiinGitHub

shadcn-ui

Integrates and customizes shadcn/ui components in React applications with Tailwind CSS.

Updated Mar 19, 2026
Search Tags:#theming#frontend#react#component library#tailwind css#shadcn#radix ui
One-click install
npx skills add https://github.com/elcokiin/vibe-tribe --skill shadcn-ui-elcokiin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/elcokiin/vibe-tribe/tree/main/.agents/skills/shadcn-ui
Command: npx skills add https://github.com/elcokiin/vibe-tribe --skill shadcn-ui-elcokiin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Integrating shadcn/ui components into a React project involves many manual steps: initializing components.json, configuring Tailwind CSS variables, setting up path aliases, installing Radix UI dependencies, and customizing themes. This Skill guides the entire workflow so components are installed, configured, and customized correctly the first time. ## Core Features & Use Cases - Component Discovery & Installation: Browse the component catalog via shadcn MCP tools and install components with the shadcn CLI, including support for custom registries and UI blocks. - Project Setup & Verification: Initialize new or existing projects with the correct Tailwind config, CSS variables, path aliases, and the cn() utility, then validate the setup with a verification script. - Theming & Customization: Customize colors via HSL CSS variables, add component variants with class-variance-authority, configure dark mode, and migrate from libraries like MUI, Chakra UI, Ant Design, or Bootstrap. - Use Case: Ask the agent to build a dashboard layout with sidebar navigation, and it will discover the relevant blocks, install the required components, wire up TanStack Table for data display, and apply your brand theme. ## Quick Start Ask the agent to set up shadcn/ui in your React project and add a button and card component.

Frequently Asked Questions about shadcn-ui

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?▼

Run npx shadcn@latest init to create components.json, then install components with npx shadcn@latest add followed by the component name, such as button or card. The CLI downloads the source into components/ui/ and installs required dependencies automatically.

How do I customize shadcn/ui theme colors?▼

Edit the HSL CSS variables in globals.css, such as --primary and --background, to match your brand palette. For component-level changes, add variants using class-variance-authority or create wrapper components rather than editing files in components/ui/ directly.

Does shadcn/ui support dark mode?▼

Yes, shadcn/ui includes dark mode through a .dark class with its own set of CSS variables. In Next.js, combine it with next-themes to toggle themes and persist the user's preference across sessions.

Can I migrate from Material-UI or Chakra UI to shadcn/ui?▼

Yes, incremental migration is recommended: install shadcn/ui alongside your existing library and replace components feature by feature. The migration guide maps MUI, Chakra UI, Ant Design, and Bootstrap components to their shadcn/ui equivalents.

Why are my shadcn/ui styles not applying?▼

Styles fail when globals.css is not imported in the root layout, Tailwind content paths exclude your component files, or CSS variables are missing. Also verify that tsconfig.json defines the @/* path alias and that tailwindcss-animate is installed.

Related Skills

Explore More Software Engineering Skills→
aashahinaashahin

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Community
Intermediate
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
idy-00idy-00

design-qa

Set up design QA gates covering token lint, accessibility, contrast, and visual regression testing.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced