Automates the installation and configuration of shadcn/ui components using modern Tailwind CSS v4 standards.
This skill streamlines the integration of the popular shadcn/ui component library into Next.js and React projects by enforcing a modern Tailwind CSS v4 configuration. Unlike standard CLI tools that may default to legacy v3 configurations, this skill implements a CSS-first approach with proper @theme blocks, HSL color tokens, and optimized PostCSS settings. It simplifies the bootstrap process for new projects, handles theme customization for various palettes like zinc or slate, and automates the installation of essential UI primitives while ensuring a clean, scalable file structure.
주요 기능
01Handles batch installation of core components like Button, Card, and Dialog
02Supports both Next.js App Router and Pages Router project structures
03Automates dependency installation for class-variance-authority and tailwind-merge
04Enforces Tailwind CSS v4 CSS-first configuration with @theme blocks
0510 GitHub stars
06Provides pre-configured support for multiple themes including Zinc, Slate, and Stone
사용 사례
01Migrating existing shadcn/ui implementations from Tailwind v3 to the v4 CSS-first approach
02Bootstrapping a new Next.js project with a modern, high-quality component library
03Quickly adding a consistent design system and UI primitives to a React application
