Membangun Design System Skalabel dengan Tailwind CSS dan CVA

Tantangan dalam Menata Komponen UI

Ketika basis kode frontend bertumbuh, mempertahankan konsistensi tombol, lencana (badges), dan elemen input menjadi hal yang menantang. Menuliskan kelas Tailwind secara manual pada setiap tombol menyebabkan duplikasi kode dan variasi gaya yang tidak konsisten.

---

Solusi: Class Variance Authority (CVA)

Pustaka class-variance-authority (CVA) memungkinkan kita mendefinisikan variasi komponen secara deklaratif dengan keamanan tipe TypeScript otomatis.

---

Implementasi Komponen Button dengan CVA

import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-xl font-medium transition-all focus:outline-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow-md',
        secondary: 'bg-neutral-200 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-white',
        outline: 'border-2 border-neutral-300 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
      },
      size: {
        sm: 'h-8 px-3 text-xs',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button className={twMerge(clsx(buttonVariants({ variant, size }), className))} {...props} />
  );
}

---

Keuntungan Utama

1. Type-Safety: Props variant dan size memiliki autokomplit TypeScript lengkap.
2. Kustomisasi Fleksibel: Kelas tambahan dapat dikombinasikan secara aman menggunakan tailwind-merge.
3. Standar Desain Konsisten: Perubahan pada variasi utama akan otomatis berdampak pada seluruh aplikasi.