Loading...
Loading...
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.
npx skill4agent add yonatangross/orchestkit ui-componentsrules/| Category | Rules | Impact | When to Use |
|---|---|---|---|
| shadcn/ui | 3 | HIGH | CVA variants, component customization, form patterns, data tables |
| Radix Primitives | 3 | HIGH | Dialogs, polymorphic composition, data-attribute styling |
| Design System Tokens | 1 | HIGH | W3C tokens, OKLCH theming, Tailwind @theme, spacing scales |
| Design System Components | 1 | HIGH | Atomic design, CVA variants, accessibility, Storybook |
| Forms | 2 | HIGH | React Hook Form v7, Zod validation, Server Actions |
// CVA variant system with cn() utility
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md font-medium transition-colors',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: 'bg-destructive text-destructive-foreground',
outline: 'border border-input bg-background hover:bg-accent',
ghost: 'hover:bg-accent hover:text-accent-foreground',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 px-3',
lg: 'h-11 px-8',
},
},
defaultVariants: { variant: 'default', size: 'default' },
}
)// Radix Dialog with asChild composition
import { Dialog } from 'radix-ui'
<Dialog.Root>
<Dialog.Trigger asChild>
<Button>Open</Button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 bg-black/50" />
<Dialog.Content className="data-[state=open]:animate-in">
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.Close>Close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>| Rule | File | Key Pattern |
|---|---|---|
| Customization | | CVA variants, cn() utility, OKLCH theming, component extension |
| Forms | | Form field wrappers, react-hook-form integration, validation |
| Data Table | | TanStack Table integration, column definitions, sorting/filtering |
| Rule | File | Key Pattern |
|---|---|---|
| Dialog | | Dialog, AlertDialog, controlled state, animations |
| Composition | | asChild, Slot, nested triggers, polymorphic rendering |
| Styling | | Data attributes, Tailwind arbitrary variants, focus management |
| Decision | Recommendation |
|---|---|
| Color format | OKLCH for perceptually uniform theming |
| Class merging | Always use cn() for Tailwind conflicts |
| Extending components | Wrap, don't modify source files |
| Variants | Use CVA for type-safe multi-axis variants |
| Styling approach | Data attributes + Tailwind arbitrary variants |
| Composition | Use |
| Animation | CSS-only with data-state selectors |
| Form components | Combine with react-hook-form |
asChildtabindex > 0| Resource | Description |
|---|---|
| scripts/ | Templates: CVA component, extended button, dialog, dropdown |
| checklists/ | shadcn setup, accessibility audit checklists |
| references/ | CVA system, OKLCH theming, cn() utility, focus management |
| Rule | File | Key Pattern |
|---|---|---|
| Token Architecture | | W3C tokens, OKLCH colors, Tailwind @theme, spacing scales |
| Rule | File | Key Pattern |
|---|---|---|
| Component Architecture | | Atomic design, CVA variants, WCAG 2.1 AA, Storybook |
| Rule | File | Key Pattern |
|---|---|---|
| React Hook Form | | useForm, field arrays, Controller, wizards, file uploads |
| Zod & Server Actions | | Zod schemas, Server Actions, useActionState, async validation |
accessibilitytesting-patterns