Component Library — Building Blocks yang Reusable
Component library adalah kumpulan UI components yang sudah didesain dan dikodekan untuk digunakan ulang di seluruh produk.
Mengapa Component Library?
- Konsistensi — semua button terlihat sama di seluruh app
- Kecepatan — tidak perlu desain/kode dari nol untuk setiap fitur
- Maintainability — fix bug di satu tempat, terupdate di semua
- Quality — components sudah di-test, accessible, dan responsive
Anatomi Component
Setiap component yang baik memiliki:
- Variants — versi berbeda (primary/secondary/ghost button)
- States — default, hover, active, disabled, loading
- Sizes — small, medium, large
- Props/API — parameter yang bisa dikustomisasi
Contoh Component: Button
Button
├── Variants: primary, secondary, ghost, destructive
├── Sizes: sm (32px), md (40px), lg (48px)
├── States: default, hover, active, focused, disabled, loading
├── Props: label, icon, onClick, disabled, loading
└── Accessibility: focus ring, aria-label jika icon-only
Popular Component Libraries
| Library | Framework | Style |
|---|---|---|
| shadcn/ui | React | Tailwind, customizable |
| Radix UI | React | Unstyled, accessible |
| Headless UI | React/Vue | Unstyled, Tailwind |
| Material UI | React | Material Design |
| Ant Design | React | Enterprise |
Build vs Use Existing?
Use existing jika:
- Tim kecil, butuh kecepatan
- Produk standar (dashboard, CRUD)
Build custom jika:
- Brand identity sangat penting
- Kebutuhan sangat spesifik
- Tim cukup besar untuk maintain
Tips
- Mulai kecil — Button, Input, Card, Modal sudah cukup untuk mulai
- Document — setiap component harus punya dokumentasi cara penggunaan
- Test accessibility — setiap component harus keyboard navigable dan screen reader friendly
- Version — track perubahan agar tidak break existing usage
