skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

shadcn-theming

Manages CSS variables, OKLCH colors and light-dark themes for shadcn/ui components.

22|3|Updated Jan 10, 2026
Search Tags:#theming#shadcn/ui#tailwind#dark mode#css variables#oklch
One-click install
npx skills add https://github.com/fusengine/agents --skill shadcn-theming-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-theming
Source: https://github.com/fusengine/agents/tree/main/plugins/shadcn-expert/skills/shadcn-theming
Command: npx skills add https://github.com/fusengine/agents --skill shadcn-theming-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the complex process of designing and implementing consistent theming for shadcn/ui components, ensuring visual harmony and adherence to modern design principles.

Core Features & Use Cases

  • OKLCH Color System: Implement wide-gamut P3 colors using the perceptually uniform OKLCH color space.
  • CSS Variable Management: Define and manage --background, --foreground, --primary, and other semantic tokens.
  • Dark Mode Support: Ensure seamless dark/light mode transitions with automatic overrides.
  • Tailwind CSS Integration: Configure themes for both Tailwind v3 and v4 using the @theme directive.
  • Use Case: You need to establish a new design system theme for a React application using shadcn/ui, ensuring all colors are accessible, consistent across light and dark modes, and properly integrated with Tailwind CSS.

Quick Start

Use the shadcn-theming skill to configure a new theme with OKLCH colors and dark mode support.

Frequently Asked Questions about shadcn-theming

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

FAQPage Schema
How do I configure shadcn/ui theming with OKLCH colors and CSS variables?▼

To configure shadcn/ui theming with OKLCH, you define semantic CSS variables like `--background` and `--primary` using the perceptually uniform OKLCH color space, ensuring visual harmony and accessible wide-gamut P3 colors across your React application.

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

Dark mode support for shadcn/ui is set up by defining automatic CSS variable overrides for light and dark themes. This ensures seamless transitions by mapping semantic tokens like `--background` to different OKLCH values per mode.

Does shadcn/ui theming work with Tailwind CSS v4 and the @theme directive?▼

Yes, shadcn/ui theming works with Tailwind CSS v4 by using the `@theme` directive to configure design tokens. This integration allows you to map OKLCH-based CSS variables directly into Tailwind utility classes.

What is the OKLCH color space and why use it for design tokens?▼

The OKLCH color space is a perceptually uniform color model used for design tokens to implement wide-gamut P3 colors. It ensures consistent visual lightness and chroma, providing accessible and modern color systems for web applications.

Can I use Radix UI primitives with shadcn/ui theming and Tailwind CSS?▼

Yes, you can use Radix UI primitives with shadcn/ui theming. The system supports integration with Radix UI and Tailwind CSS, allowing you to manage semantic design tokens and apply them consistently across primitive components.

Related Skills

Explore More Design & Creative Skills→
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced
djankiesdjankies

configuring-tailwind-v4

Configure Tailwind CSS v4 with CSS-first @import and @theme directives.

Community
Advanced
devbyraydevbyray

tailwind-css

Guide Tailwind CSS v4+ configuration with @theme and @apply directives.

Community
Intermediate
mikkermikker
102

oklch-skill

Convert hex, rgb, hsl inputs to OKLCH values for Tailwind v4 theming.

Community
Intermediate