Membangun Komponen UI Aksesibel dengan Shadcn UI dan Radix Primitives

Konsep Headless UI Component

Perpustakaan UI tradisional seperti Bootstrap atau Material UI hadir dengan komponen siap pakai yang menyertakan penataan gaya kaku yang sulit disesuaikan. Sebaliknya, Headless UI memisahkan logika aksesibilitas WAI-ARIA & navigasi keyboard dari penataan gaya visual.

---

Mengapa Shadcn UI Istimewa?

Shadcn UI bukan pustaka NPM biasa yang mengunci Anda di dalam node_modules. Shadcn UI adalah koleksi komponen berbasis Radix UI Primitives dan Tailwind CSS yang disalin (copied) langsung ke dalam folder proyek Anda.

---

Contoh Komponen Dialog (Modal) Aksesibel

import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';

export function CustomDialog({ open, onOpenChange, title, children }) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
        <DialogPrimitive.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-neutral-900 p-6 rounded-2xl shadow-xl w-full max-w-md">
          <DialogPrimitive.Title className="text-xl font-bold">
            {title}
          </DialogPrimitive.Title>
          <div className="mt-4">{children}</div>
          <DialogPrimitive.Close className="absolute top-4 right-4 p-1 text-neutral-500 hover:text-neutral-900">
            <X size={18} />
          </DialogPrimitive.Close>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

---

Keuntungan Utama

1. Aksesibilitas WAI-ARIA Bawaan: Mendukung navigasi tombol Tab, penutupan dengan ESC, dan pembaca layar (screen readers).
2. Kontrol Penuh 100%: Anda dapat mengubah HTML dan kelas Tailwind tanpa batasan tema pihak ketiga.
3. Ukuran Bundle Efisien: Hanya menyertakan primitif yang benar-benar digunakan dalam aplikasi.