skills.rest
JenilRevaliya
JenilRevaliyaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn-ui-expert

Implements and customizes shadcn/ui components in React and Next.js projects.

Updated Apr 13, 2026
Search Tags:#theming#react#components#nextjs#tailwind#shadcn#radix
One-click install
npx skills add https://github.com/JenilRevaliya/ARGUS --skill shadcn-ui-expert-jenilrevaliya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui-expert
Source: https://github.com/JenilRevaliya/ARGUS/tree/main/.agent/skills/shadcn-ui-expert
Command: npx skills add https://github.com/JenilRevaliya/ARGUS --skill shadcn-ui-expert-jenilrevaliya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers frequently misuse shadcn/ui by treating it as an npm package, breaking Radix accessibility, or hardcoding themes instead of using CSS variables. This Skill provides correct patterns for installing, customizing, theming, and integrating shadcn/ui components in React and Next.js applications. ## Core Features & Use Cases - Hallucination Trap Prevention: Corrects common mistakes like importing from 'shadcn-ui' as a package or skipping the init step. - Component Customization: Guides adding variants via class-variance-authority (cva) and modifying owned component code in components/ui. - Theming & Dark Mode: Implements CSS custom properties for themes with Tailwind v4 CSS-first configuration and the cn utility for class conflict resolution. - Use Case: When building a Next.js App Router page that needs an accessible Dialog with a custom button variant and dark mode support, this Skill provides the correct server/client component split and theming setup. ## Quick Start Ask the assistant to add a shadcn/ui Dialog with a custom button variant and dark mode support to your Next.js project.

Frequently Asked Questions about shadcn-ui-expert

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

FAQPage Schema
How do I install shadcn/ui components in a Next.js project?▼

Run npx shadcn@latest init first to generate the Tailwind config and utils, then add each component individually with npx shadcn@latest add button. shadcn/ui is not an npm package; components are copied into your project under components/ui.

How do I add custom variants to shadcn/ui Button?▼

Edit the button component directly using class-variance-authority (cva). Add your variant key and Tailwind classes to the variants object inside buttonVariants, then reference it via the variant prop.

Does shadcn/ui support dark mode with Tailwind CSS?▼

Yes, shadcn/ui manages themes through CSS custom properties defined in globals.css under :root and .dark selectors. Tailwind v4 maps these variables via the @theme directive, so colors like bg-background resolve per theme.

Why does my shadcn Dialog fail in a Next.js Server Component?▼

Radix primitives like Dialog use React context and side effects, so they must run in Client Components. Extract the interactive dialog into a file with the use client directive and pass server-fetched data as props.

What is the cn utility in shadcn/ui used for?▼

The cn utility combines clsx for conditional classes and tailwind-merge for resolving conflicting Tailwind classes. It prevents issues where duplicate utilities like hover:bg-blue-500 and hover:bg-red-500 silently override each other.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

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

Community
Advanced
mgd34msumgd34msu
4

aws-amplify

Deploy full-stack web applications to AWS Amplify with CI/CD pipelines.

Community
Intermediate
mgiffordmgifford
39

light-dark-mode

Enforce WCAG-compliant color contrast across light, dark, and forced-color modes.

Community
Advanced
SensLiaoSensLiao

shadcn-registry

Package and distribute self-hosted component libraries via JSON-over-HTTP.

Community
Advanced