shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

2|Updated Dec 5, 2025

Search Tags:#typescript #theming #frontend #react #design system #shadcn/ui #tailwind css

Ready to run

npx skills add https://github.com/AgentiveCity/SkillFactory --skill shadcn-setup-and-theming

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn-setup-and-theming
Source: https://github.com/AgentiveCity/SkillFactory/tree/main/.claude/skills/shadcn-setup-and-theming
Command: npx skills add https://github.com/AgentiveCity/SkillFactory --skill shadcn-setup-and-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about shadcn-setup-and-theming

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

FAQPage Schema

How do I install and configure shadcn/ui in a React TypeScript project?▼

Install shadcn/ui by running the CLI in your React + TypeScript project, which configures Tailwind CSS, PostCSS, and generates components.json with correct import aliases and component paths. The Skill automates this setup for Next.js App Router and Vite workflows.

What is components.json and why do I need to configure it for shadcn/ui?▼

components.json is a configuration file that tells shadcn/ui where your Tailwind config, global CSS, and component directories are located. Correct configuration ensures shadcn components install to the right paths and respect your project structure.

How do I set up dark mode support for shadcn/ui components?▼

Define dark mode tokens in your Tailwind configuration and design system theme, then configure shadcn/ui to apply these tokens to components. The Skill handles token generation and dark mode setup for consistent theming across light and dark modes.

Can I customize colors, radius, and typography across all shadcn/ui components?▼

Yes. Customize design tokens—colors, radius, and typography—in your theme configuration, and shadcn/ui components automatically inherit these values. The Skill defines and adjusts these tokens to ensure consistency across your entire component library.

Why do my shadcn/ui components have import errors or theming issues after installation?▼

Misconfigurations in components.json, incorrect import alias paths, or incomplete Tailwind setup cause these issues. The Skill diagnoses and repairs these problems, ensuring import paths align with your project structure and theme tokens apply correctly.

How do I maintain consistent theming when adding new shadcn/ui components to my project?▼

Document your design tokens and components.json configuration so future component generation applies the same theme automatically. The Skill creates repeatable setup documentation, ensuring new components inherit your design system without manual adjustment.