skills.rest
yaresimeonthomas
yaresimeonthomasCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-customization

Centralize shadcn/ui theme changes via semantic CSS variables.

Updated Jul 1, 2026
Search Tags:#theming#tailwind#shadcn#dark-mode#css-variables#oklch#component-customization
One-click install
npx skills add https://github.com/yaresimeonthomas/-kate-crm --skill shadcn-customization-yaresimeonthomas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-customization
Source: https://github.com/yaresimeonthomas/-kate-crm/tree/main/.claude/skills/shadcn-customization
Command: npx skills add https://github.com/yaresimeonthomas/-kate-crm --skill shadcn-customization-yaresimeonthomas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious, error-prone work of manually adjusting individual shadcn/ui component styles and managing inconsistent theme settings across light and dark modes, ensuring a cohesive UI with minimal effort.

Core Features & Use Cases

  • Semantic Token Management: Update CSS variables to modify colors, borders, and border radii across all shadcn/ui components at once, instead of editing each component individually.
  • Dark Mode Configuration: Sync light and dark theme palettes via the built-in ThemeProvider to ensure consistent styling across both modes.
  • Custom Component Extensions: Add new component variants or wrapper components without modifying core shadcn/ui source code. For example, use this Skill to add a custom warning button variant to your CRM without overriding the base Button component.

Quick Start

Use the shadcn-customization skill to add a custom warning color token and matching button variant to your Atomic CRM project.

Frequently Asked Questions about shadcn-customization

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

FAQPage Schema
How do I customize shadcn/ui theme colors across all components at once?▼

To customize shadcn/ui theme colors globally, update semantic CSS variables rather than editing individual components. This centralizes color palette modifications and ensures consistent styling changes across your entire UI component library.

How do I configure dark mode in shadcn/ui with OKLCH color tokens?▼

Configuring dark mode in shadcn/ui involves syncing light and dark theme palettes using semantic CSS variables. You define OKLCH color tokens and register them via Tailwind v4 theme registration to ensure consistent UI across both modes.

Can I add custom variants to shadcn/ui components without modifying the source code?▼

Yes, you can add custom variants to shadcn/ui components by creating wrapper components. This allows you to extend components, like adding a custom warning button variant, without overriding or modifying the core shadcn/ui source code.

What is the best way to manage Tailwind v4 theme registration for shadcn/ui?▼

The best way to manage Tailwind v4 theme registration for shadcn/ui is by defining semantic CSS variables for your design tokens. This meets shadcn/ui best practices and eliminates repetitive manual styling work across your project.

Does this approach to shadcn/ui component customization support border radius adjustments?▼

Yes, this approach to shadcn/ui component customization supports border radius adjustments. By updating the relevant semantic CSS variables, you can modify border radii across all shadcn/ui components simultaneously.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
imkdwimkdw
1

Frontend CSS

Apply Tailwind CSS utility classes with custom design tokens and dark mode.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced