skills.rest
moughamir
moughamirCOMMUNITY
Explore all skills by this author →
Website𝕏@omnizyaGitHub

shadcn-ui

Install and configure shadcn/ui components for themed React applications.

Updated Mar 26, 2026
Search Tags:#forms#react components#shadcn-ui#data tables#tailwind theme#ui installation#component recipes
One-click install
npx skills add https://github.com/moughamir/justwaitit-review --skill shadcn-ui-moughamir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/moughamir/justwaitit-review/tree/main/.agents/skills/shadcn-ui
Command: npx skills add https://github.com/moughamir/justwaitit-review --skill shadcn-ui-moughamir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents UI setup churn by guiding you to install and configure shadcn/ui components in the correct order while aligning them with your existing theme tokens and React patterns.

Core Features & Use Cases

  • Deterministic installation workflow: Installs foundation components first, then feature components, so dependencies are ready when you need them.
  • Theme-aligned customization: Uses semantic tokens from your theme (not raw Tailwind colors) to keep styling consistent across the app.
  • Practical UI recipes: Helps you assemble common UI patterns like forms, data tables, navigation, modals, and settings screens with shadcn components.
  • Common gotcha prevention: Includes guardrails for frequent issues such as Radix Select sentinel values, React Hook Form value handling, and Lucide icon tree-shaking.

Quick Start

Configure your theme with tailwind-theme-builder first, then run the shadcn-ui skill to install the exact set of shadcn components you need and wire them into consistent React UI patterns using your semantic tokens.

Frequently Asked Questions about shadcn-ui

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

FAQPage Schema
How do I install shadcn/ui components in the correct dependency order?▼

Install shadcn/ui components deterministically by setting up foundation components first, then feature components, ensuring all dependencies are ready when you wire them into your React application.

What do I need to configure before adding shadcn-ui components to my React app?▼

Before installing shadcn-ui components, you must set up your theme infrastructure with CSS variables, a components.json file, and the cn() utility to ensure semantic token styling works correctly.

Can I use raw Tailwind colors to customize shadcn/ui components?▼

You should not use raw Tailwind colors for shadcn/ui components; instead, use semantic tokens from your theme to maintain consistent styling across your entire React application.

How do I build data tables and forms with shadcn-ui components?▼

Assemble data tables and forms by selecting the appropriate shadcn-ui components and following practical UI recipes that wire them together into consistent, reusable React patterns.

Why does my React Hook Form value handling break with shadcn-ui Select?▼

React Hook Form value handling and Radix Select sentinel values are known gotchas; apply specific guardrails and workarounds to ensure proper value integration when building forms.

Related Skills

Explore More Design & Creative Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
ayesha-aziz123ayesha-aziz123
2

shadcn

Provide shadcn/ui components with theming and accessibility for React apps.

Community
Intermediate
jdretsjdrets

shadcn-ui

Install shadcn/ui components and configure React Hook Form with Zod validation.

Community
Intermediate
J-StaR-Films-StudiosJ-StaR-Films-Studios
23

shadcn-ui

Integrate and customize shadcn/ui components in React applications.

Official
Intermediate