skills.rest
zaid-khan-code
zaid-khan-codeCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-setup

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

3|2|Updated Mar 25, 2026
Search Tags:#theming#react#components#nextjs#tailwind#shadcn
One-click install
npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-setup
Source: https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms/tree/main/.agents/skills/shadcn-setup
Command: npx skills add https://github.com/zaid-khan-code/learnHub-ai-powered-online-learning-platform-lms --skill shadcn-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires class-variance-authority, clsx, tailwind-merge, lucide-react, tailwindcss, @tailwindcss/postcss, and includes scripts (resource) components.

What problem does it solve?

This Skill removes the friction of configuring shadcn/ui for modern Next.js and React projects by generating the correct Tailwind CSS v4 setup, component wiring, and theme tokens from the start.

Core Features & Use Cases

  • Tailwind v4 Setup: Creates a CSS-first configuration with the proper globals.css theme block and PostCSS setup.
  • Shadcn Component Foundation: Generates the common project files and aliases needed for clean component imports and reuse.
  • Theme and Router Support: Handles multiple color themes, App Router or Pages Router structure, and optional dark mode behavior.
  • Use Case: Use this Skill when starting a new Next.js app, migrating an existing shadcn setup to Tailwind v4, or preparing a production-ready UI foundation with common components installed.

Quick Start

Ask the skill to set up shadcn/ui with Tailwind CSS v4 for your Next.js project and specify the theme, router style, and components you want.

Frequently Asked Questions about shadcn-setup

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

FAQPage Schema
How do I set up shadcn/ui with Tailwind CSS v4 in a Next.js project?▼

To set up shadcn/ui with Tailwind CSS v4, you need a CSS-first configuration with a globals.css theme block, PostCSS setup, components.json, and cn utility scaffolding. This process configures dependency installation and removes deprecated Tailwind v3 config files.

What is the best way to migrate an existing shadcn setup to Tailwind v4?▼

Migrating an existing shadcn setup to Tailwind v4 requires generating CSS-first Tailwind theme tokens, updating PostCSS configuration, and removing deprecated Tailwind v3 config files. This ensures your component aliases and theme tokens remain compatible.

Does shadcn/ui support Tailwind CSS v4 for App Router and Pages Router?▼

Yes, shadcn/ui configuration supports both App Router and Pages Router structures in Next.js. The setup handles router-specific layouts, multiple color themes, optional dark mode behavior, and the necessary component import aliases.

Why do I need class-variance-authority and tailwind-merge for shadcn components?▼

Class-variance-authority and tailwind-merge are required dependencies to build the cn utility scaffolding. This utility manages conditional class names and resolves Tailwind CSS conflicts, ensuring clean component styling and reuse.

Can I customize multiple color themes and dark mode with shadcn/ui?▼

Yes, you can customize multiple color themes and configure optional dark mode behavior with shadcn/ui. The setup generates a CSS-first theme block within your globals.css file to manage these design tokens effectively.

Related Skills

Explore More Software Engineering Skills→
darellchua2darellchua2
4

nextjs-standard-setup

A short, concise statement (3-5 words) that summarizes the essence of your pitch, ideally using keywords from your pitch and/or highlighting the main pain point you solve.

Community
Advanced
VV01T3KVV01T3K

shadcn-ui

Implement accessible shadcn/ui components in React projects with Tailwind CSS and Radix primitives.

Community
Advanced
fusenginefusengine
22

nextjs-tanstack-form

Create type-safe Next.js 16 forms with TanStack Form and Zod validation.

Community
Advanced
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate