Can I customize the theme colors during setup?

Absolutely. You can specify themes like Zinc, Slate, Stone, or specific colors like Blue and Green to automatically generate the correct HSL tokens in your CSS.

Why use this skill instead of the standard shadcn CLI?

The standard CLI often defaults to Tailwind v3 configurations; this skill ensures a modern, CSS-first Tailwind v4 setup with proper @theme blocks and no deprecated config files.

Does this work with both Next.js App and Pages routers?

Yes, the skill includes flags for both architectures and adjusts the file structure and globals.css location accordingly.

What happens to my existing tailwind.config.js?

Since Tailwind v4 uses a CSS-first approach, this skill helps you transition by moving configuration to the @theme block in your CSS file and removing the legacy JS/TS config files.

Shadcn UI Setup

Name: Shadcn UI Setup
Author: shipshitdev

byshipshitdev

•

Design Tools

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.

Key Features

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

Use Cases

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shipshitdev/library shadcn-setup

For use in Claude.ai and ChatGPT

Download Skill