| name | ui-components |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| description | UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations. |
| tags | ["ui-components","shadcn","radix","component-library","design-system","accessible-components","react-hook-form","zod","forms","validation","server-actions","field-arrays"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 2.1.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | reference |
| metadata | {"category":"document-asset-creation"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
UI Components
Patterns for building accessible UI component libraries with shadcn/ui and Radix Primitives, as a thin wrap over the first-party docs: quick-start recipes, key decisions, anti-patterns, and the house delta. Vendor mechanics (CVA variants, cn() utility, component extension, asChild composition, dialog/menu patterns, data-attribute styling) are upstream's job; see Upstream coverage (do not restate). Each remaining category has individual rule files in rules/ loaded on-demand.
Quick Reference
| Category | Rules | Impact | When to Use |
|---|
| shadcn/ui | 1 | HIGH | v4 styles, preset codes, style detection |
| Design System | 4 | HIGH | W3C tokens, OKLCH theming, spacing scales, typography, component states, animation |
| Design System Components | 1 | HIGH | Atomic design, CVA variants, accessibility, Storybook |
| Forms | 2 | HIGH | React Hook Form v7, Zod validation, Server Actions |
| Modern CSS & Tooling | 3 | HIGH | CSS cascade layers, Tailwind v4, Storybook CSF3 |
| UX Foundations | 4 | HIGH | Visual hierarchy, typography thresholds, color system, empty states |
Total: 15 rules across 6 categories. Radix primitive mechanics and shadcn
customization tutorials are first-party documented; see
Upstream coverage (do not restate) and
references/ork-delta.md for what stays ours.
Quick Start
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = (
,
{
: {
: {
: ,
: ,
: ,
: ,
},
: {
: ,
: ,
: ,
},
},
: { : , : },
}
)
