EMCN Components

Import from @/components/emcn, never from subpaths (except CSS files).

CVA vs Direct Styles

Use CVA when: 2+ variants (primary/secondary, sm/md/lg)

const buttonVariants = cva('base-classes', {
  variants: { variant: { default: '...', primary: '...' } }
})
export { Button, buttonVariants }

Use direct className when: Single consistent style, no variations

function Label({ className, ...props }) {
  return <Primitive className={cn('style-classes', className)} {...props} />
}

Rules

• Use Radix UI primitives for accessibility
• Export component and variants (if using CVA)
• TSDoc with usage examples
• Consistent tokens: font-medium, text-[12px], rounded-[4px]
• transition-colors for hover states