membangun-component-library

Headless UI library seperti Radix kasih primitif yang aksesibel, unstyled, dan fully controlled. Digabung Tailwind, kamu bisa bikin component library unik tanpa nulis ulang logika aksesibilitas.

Kenapa Radix?

• Kontrol penuh styling — gak perlu override CSS orang lain
• Aksesibilitas built-in — WAI-ARIA, keyboard nav, focus trap
• Compound components — API komposabel
• Bundle kecil — tree-shakeable per-primitive

Pola dasar: forwardRef + cn() + ComponentPropsWithoutRef

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "gold", ...props }, ref) => (
    <button ref={ref} className={cn(base, variantStyles[variant], className)} {...props} />
  )
)
Button.displayName = "Button"

Rule of three

Gak perlu bikin abstraction wrapper sampai pola muncul 3+ kali. Abstraksi lahir dari pengulangan, bukan spekulasi.