Skills
.Work. You
Rest

shadcn-setup-and-theming

Official

Theme shadcn/ui, consistent & beautiful.

Software Engineering#typescript#theming#frontend#react#design system#shadcn/ui#tailwind css
AuthorAgentiveCity
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Installing, configuring, and theming shadcn/ui across React + TypeScript projects (Next.js or Vite) involves managing CLI, components.json, Tailwind integration, colors, radius, and dark mode. This can be complex and lead to inconsistent UIs. This Skill automates the setup and ensures a consistent design system, saving configuration time.

Core Features & Use Cases

  • Automated shadcn/ui Installation: Install and wire shadcn/ui in new or existing React + TS projects, ensuring correct Tailwind and PostCSS setup.
  • components.json Configuration: Create or correct components.json to accurately reference Tailwind config, global CSS, and component/utility paths.
  • Comprehensive Theming: Define and adjust design system tokens (radius, colors, typography) and configure dark mode, ensuring consistency across components.

Quick Start

Install shadcn/ui and set up theme tokens for this Next.js app, changing brand colors and radius across all shadcn components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-setup-and-theming
Download link: https://github.com/AgentiveCity/SkillFactory/archive/main.zip#shadcn-setup-and-theming

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.