skills.rest
marmelab
marmelabOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-customization

Centralize shadcn/ui theming with semantic CSS variables for light and dark modes.

26|4|Updated Apr 9, 2026
Search Tags:#theming#shadcn/ui#tailwind#ui components#dark mode#css variables#oklch
One-click install
npx skills add https://github.com/marmelab/crm-builder --skill shadcn-customization-marmelab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-customization
Source: https://github.com/marmelab/crm-builder/tree/main/claudeConfig/.claude/skills/shadcn-customization
Command: npx skills add https://github.com/marmelab/crm-builder --skill shadcn-customization-marmelab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Shadcn/ui styling changes can be slow and inconsistent when you try to tweak individual components instead of managing a single source of truth for colors and theming.

Core Features & Use Cases

  • Semantic CSS variable theming: Update :root and .dark CSS variables (e.g., --primary, --card, --muted) to propagate theme changes across all shadcn/ui components.
  • OKLCH-based color strategy: Use OKLCH color values to keep palette changes cohesive and predictable across light and dark modes.
  • Integration with Tailwind utilities: Ensure Tailwind maps the semantic variables to utilities like bg-primary and text-muted-foreground so variants and components stay aligned.
  • Theme application workflows: Apply official presets or initialize with a preset, or directly edit globals.css variables for full control.

Quick Start

Edit your global CSS variables in the file where shadcn registers Tailwind tokens (typically globals.css) and update the :root and .dark color values to immediately restyle your entire shadcn/ui component set.

Frequently Asked Questions about shadcn-customization

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

FAQPage Schema
How do I theme shadcn/ui components with CSS variables?▼

To theme shadcn/ui, you update semantic CSS variables like --primary and --card in your globals.css file. Defining these variables under :root and .dark propagates color changes automatically across your entire shadcn/ui component set.

Why use OKLCH colors for Tailwind dark mode theming?▼

OKLCH colors keep palette changes cohesive and predictable when theming light and dark modes. Using OKLCH values for your semantic CSS variables ensures visual consistency across Tailwind utilities like bg-primary and text-muted-foreground.

What is the best way to apply dark mode across a React app using shadcn/ui?▼

The best way to apply dark mode is using semantic CSS variables. Define your color palette using OKLCH values within the :root and .dark selectors in globals.css so shadcn/ui components respond to dark mode consistently.

Can I use Tailwind utilities to style shadcn/ui component variants?▼

Yes, Tailwind maps semantic CSS variables to utilities like bg-primary and text-muted-foreground. This ensures component variants and layouts stay aligned with your theme, allowing you to control styling at scale through globals.css.

Do I need to edit individual shadcn/ui components to change colors?▼

No, you do not need to edit individual components. By centralizing theming through semantic CSS variables in globals.css, you can manage a single source of truth for colors and update your entire shadcn/ui component set at once.

Related Skills

Explore More Design & Creative Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
systempromptiosystempromptio
2

visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

Official
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
fusenginefusengine
22

theming-tokens

Organize primitive, semantic, and component design tokens for UI theming.

Community
Intermediate