ui-components

Document reusable shadcn/ui and Radix component patterns with CVA variants and OKLCH theming.

Updated Nov 18, 2025

Search Tags:#frontend #react #design-system #cva #ui-components #oklch #radix

Ready to run

npx skills add https://github.com/EdwinFermin/innvox --skill ui-components-edwinfermin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-components
Source: https://github.com/EdwinFermin/innvox/tree/main/.agents/skills/ui-components
Command: npx skills add https://github.com/EdwinFermin/innvox --skill ui-components-edwinfermin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, @radix-ui/react-dialog, @radix-ui/react-slot, @radix-ui/react-dropdown-menu, lucide-react, class-variance-authority, clsx, tailwind-merge, next, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a structured pattern library for building accessible UI components using shadcn/ui and Radix primitives, enabling consistent design-system work across projects.

Core Features & Use Cases

CVA-based variant system for type-safe, flexible component styling across a wide range of UI primitives.
OKLCH theming and design tokens to ensure perceptually uniform color handling and reliable dark-mode transitions.
asChild and Slot composition patterns to enable polymorphic rendering without extra DOM wrappers.
Comprehensive references and templates to guide extension, wrapping, and integration into existing design systems.

Quick Start

Review the scripts/ and references/ to understand patterns, then apply the templates to build a consistent UI module.

Frequently Asked Questions about ui-components

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

FAQPage Schema

How do I build accessible UI components for a scalable React design system?▼

Build accessible UI components for a scalable React design system by applying shadcn/ui and Radix primitives. This approach uses CVA variant systems, the cn() utility, and OKLCH theming to ensure type-safe styling, perceptually uniform colors, and reliable dark-mode transitions across your project.

What is the best way to manage component variants in a React design system?▼

The best way to manage component variants in a React design system is using class-variance-authority (CVA). CVA provides a type-safe, flexible system for defining component styles, allowing you to easily extend and compose UI primitives without duplicating styling logic.

How does OKLCH theming improve dark mode transitions in frontend applications?▼

OKLCH theming improves dark mode transitions by using perceptually uniform color spaces for design tokens. This ensures consistent color handling across UI components, providing visually accurate lightness adjustments and reliable contrast when switching between themes in your frontend application.

Can I use Radix Slot and asChild patterns to avoid extra DOM wrappers in React?▼

Yes, you can use Radix Slot and the asChild composition pattern to enable polymorphic rendering without adding extra DOM wrappers. This pattern allows you to merge component props onto child elements, maintaining accessible interactions while keeping your DOM structure clean.

Do I need Tailwind CSS to implement shadcn/ui and Radix component patterns?▼

You need Tailwind CSS and tailwind-merge to implement these specific shadcn/ui and Radix component patterns. The provided templates rely on the cn() utility, which combines clsx and tailwind-merge to conditionally merge class names and resolve styling conflicts.

How do I extend an existing design system with shadcn/ui components?▼

Extend an existing design system with shadcn/ui components by reviewing the provided scripts and references. These templates demonstrate how to wrap Radix primitives, apply CVA variant systems, and integrate OKLCH design tokens, offering clear guidance for modular architecture and composition.