Kode Era: 🔵 Classic | 🟢 Modern | 🔴 Research/Frontier | ✦ Sedang Tren (2024–2025)
Daftar Isi
- ✦ SEDANG TREN SAAT INI (2024–2025)
- 1. Navigation Components
- 2. Form & Input Components
- 3. Button & Action Components
- 4. Display & Content Components
- 5. Feedback & Status Components
- 6. Overlay & Layer Components
- 7. Layout & Container Components
- 8. Data Visualization Components
- 9. Utility & Helper Components
- 10. Authentication & User Components
- 11. E-commerce Specific Components
- 12. Communication & Collaboration Components
- Ringkasan Statistik
- Klasifikasi Berdasarkan Era
- Referensi Design System
- Referensi Standar & Aksesibilitas
✦ SEDANG TREN SAAT INI (2024–2025)
AI-Powered Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| AI Chat Interface | ✦ Tren | Panel percakapan dengan LLM; streaming text, markdown rendering, code highlight | SaaS assistant, customer support, copilot |
| Inline AI Suggestion | ✦ Tren | Ghost text muncul di dalam input/editor; Tab untuk accept | GitHub Copilot, Notion AI, Linear AI |
| AI Command Bar (⌘K) | ✦ Tren | Command palette dengan natural language input; fuzzy search + AI routing | Raycast, Linear, Vercel, Cursor IDE |
| Prompt Input Box | ✦ Tren | Textarea khusus LLM prompt; auto-resize, token counter, submit on Enter | ChatGPT, Claude, Perplexity |
| Streaming Text Output | ✦ Tren | Teks muncul karakter per karakter dari server-sent events | Semua LLM chat interface |
| AI Loading Skeleton | ✦ Tren | Animated placeholder saat AI generating; pulse + shimmer | AI-powered tools |
| Source Citation Card | ✦ Tren | Card kecil menampilkan sumber referensi AI response; inline atau tooltip | Perplexity, Bing AI, Claude |
| Confidence Indicator | ✦ Tren | Visual indicator seberapa "yakin" AI dengan output-nya | Research tools, AI diagnostic |
| AI Diff Viewer | ✦ Tren | Side-by-side sebelum/sesudah AI edit; accept/reject per chunk | Cursor, GitHub Copilot, v0.dev |
| Regenerate Button | ✦ Tren | Tombol untuk generate ulang AI response | ChatGPT, Claude, semua LLM UI |
Layout & Navigation Tren
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Bento Grid Card | ✦ Tren | Card dalam grid asimetris berbeda ukuran; Apple-inspired | Product landing page, portfolio |
| Floating Action Island | ✦ Tren | Dynamic Island-style floating pill yang mengembang saat ada aksi | Mobile-like web, notification hub |
| Glassmorphism Card | ✦ Tren | Card dengan frosted glass: backdrop-blur, semi-transparent, light border | Dashboard, SaaS UI, overlay |
| Command Palette | ✦ Tren | Modal search/command dengan keyboard shortcut (⌘K); fuzzy search | Semua productivity tool modern |
| Bottom Navigation Bar | ✦ Tren | Nav bar di bagian bawah layar; mobile pattern masuk ke web | PWA, mobile-first web app |
| Collapsible Sidebar | ✦ Tren | Sidebar yang collapse jadi icon rail; toggle ke full width | Linear, Notion, VS Code style |
| Sticky Table of Contents | ✦ Tren | TOC yang mengikuti scroll di sisi kanan; active state per section | Documentation, long-form article |
| Drawer / Bottom Sheet | ✦ Tren | Panel yang muncul dari bawah atau samping dengan swipe gesture | Mobile web, PWA, action menu |
Visual & Feedback Tren
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Animated Gradient Background | ✦ Tren | Aurora mesh gradient yang bergerak perlahan di hero section | SaaS landing page, hero |
| Spotlight Effect | ✦ Tren | Cahaya mengikuti cursor mouse di atas card atau section | awwwards sites, premium landing page |
| Noise / Grain Texture Overlay | ✦ Tren | Subtle grain texture overlay di atas solid color atau gradient | Agency, premium brand sites |
| Shimmer Loading | ✦ Tren | Skeleton dengan shimmer animation yang lebih smooth dari pulse | Content loading state, AI UI |
| Confetti Animation | ✦ Tren | Partikel confetti saat achieve/complete sesuatu | Gamification, onboarding success |
| Lottie Animation Component | ✦ Tren | After Effects animation sebagai component; ringan dan scalable | Onboarding, empty state, loading |
| Spring Animation Transition | ✦ Tren | Physics-based spring animation untuk semua state transition | Framer Motion, React Spring apps |
| Number Counter Animation | ✦ Tren | Angka yang count up saat masuk viewport | Stats section, dashboard KPI |
1. Navigation Components
1.1 Primary Navigation
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Horizontal Navigation Bar | 🔵 Classic | Nav links horizontal di top; logo kiri, menu kanan | Website publik, marketing site |
| Vertical Sidebar Navigation | 🔵 Classic | Daftar menu di sisi kiri; hierarkis dengan section | Web app, dashboard, admin panel |
| Hamburger Menu | 🔵 Classic | 3-garis icon yang toggle mobile navigation drawer | Mobile navigation, responsive site |
| Mega Menu | 🔵 Classic | Dropdown lebar berisi grid link, gambar, dan deskripsi | E-commerce, portal, large site |
| Dropdown Menu | 🔵 Classic | List item yang muncul saat hover atau klik nav item | Sub-navigation, category menu |
| Flyout Menu | 🔵 Classic | Menu yang "terbang" keluar ke samping; nested navigation | Complex site architecture |
| Breadcrumb | 🔵 Classic | Trail lokasi: Home > Category > Sub > Current Page | E-commerce, documentation, CMS |
| Tab Navigation | 🔵 Classic | Horizontal tabs untuk switch antar section atau view | Dashboard, settings, data view |
| Pill Navigation | 🟢 Modern | Tab berbentuk pill/capsule; lebih rounded dari tab biasa | Mobile app, filter bar |
| Icon + Label Nav | 🟢 Modern | Sidebar dengan icon dan label teks di samping | VS Code, Slack, Discord |
| Icon-only Nav Rail | 🟢 Modern | Sidebar hanya icon; tooltip saat hover untuk label | Collapsed sidebar state |
| Step Navigation / Wizard | 🔵 Classic | Progress steps untuk multi-step form atau onboarding | Checkout, setup wizard, onboarding |
| Pagination | 🔵 Classic | Navigasi halaman: prev, numbers, next | Search results, table, blog list |
| Infinite Scroll Trigger | 🟢 Modern | Load more content otomatis saat scroll ke bawah | Social feed, product listing |
| Load More Button | 🔵 Classic | Tombol eksplisit untuk load batch konten berikutnya | Blog, product list, comment |
| Back to Top Button | 🔵 Classic | Floating button muncul saat scroll jauh ke bawah | Long page, article |
| Skip to Content Link | 🟢 Modern | Accessibility link untuk bypass navigation; visible on focus | All accessible websites |
1.2 Secondary & Utility Navigation
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Footer Navigation | 🔵 Classic | Link-link di bagian bawah halaman; sitemap, legal, social | Semua website |
| Sitemap | 🔵 Classic | Daftar lengkap semua halaman website | SEO, large website |
| Tag Cloud | 🔵 Classic | Kumpulan tag dengan ukuran proporsional frekuensi | Blog, CMS, content site |
| Category Filter Bar | 🟢 Modern | Horizontal pills untuk filter konten by category | Blog, portfolio, product list |
| Faceted Filter Sidebar | 🔵 Classic | Multiple filter criteria di sidebar; checkbox, range, radio | E-commerce, search results |
| Search Bar / Omnibox | 🔵 Classic | Input field untuk search; sering dengan autocomplete | Semua website dengan konten |
| Global Search Modal | 🟢 Modern | Full-screen atau modal search dengan instant results | Documentation, large app |
| Command Palette | ✦ Tren | Keyboard-first command interface; ⌘K shortcut | Productivity app, dev tool |
2. Form & Input Components
2.1 Text Input
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Text Input (single line) | 🔵 Classic | Input teks satu baris; standar HTML <input type="text"> |
Form field, search |
| Textarea (multi-line) | 🔵 Classic | Input teks multi-baris; resize handle | Comment, description, message |
| Auto-resize Textarea | 🟢 Modern | Textarea yang otomatis grow/shrink sesuai konten | Chat input, note taking |
| Rich Text Editor (WYSIWYG) | 🔵 Classic | Editor dengan formatting toolbar: bold, italic, list, link | CMS, blog, email composer |
| Markdown Editor | 🟢 Modern | Editor dengan live preview markdown; syntax highlighting | GitHub, Notion, documentation |
| Code Editor | 🟢 Modern | Monaco/CodeMirror-based; syntax highlight, autocomplete | IDE-in-browser, playground |
| Floating Label Input | 🟢 Modern | Label bergerak ke atas saat input focused atau terisi | Material Design, modern form |
| Inline Edit | 🟢 Modern | Klik teks untuk langsung edit in-place; tanpa modal | Notion, Airtable, inline CMS |
| Autofill Input | 🟢 Modern | Input dengan browser autofill dan suggestion | Login, address, payment form |
| OTP Input | 🟢 Modern | Serangkaian kotak input 1 digit untuk kode verifikasi | 2FA, SMS verification |
| Password Input | 🔵 Classic | Input dengan toggle show/hide password | Login, signup form |
| Search Input with Suggestions | 🟢 Modern | Search input dengan dropdown autocomplete results | Search bar, product search |
| Tag Input | 🟢 Modern | Input yang menghasilkan chip/tag; Enter untuk tambah tag | Filter, label, keyword input |
| Mention Input (@) | 🟢 Modern | Input yang trigger dropdown saat ketik @; mention user | Comment, chat, collaboration |
| Token Input | 🟢 Modern | Seperti tag input tapi untuk email/user token | Email composer, permission field |
| Emoji Picker Input | 🟢 Modern | Input dengan trigger emoji picker panel | Chat, reaction, comment |
| Voice Input | 🟢 Modern | Microphone button untuk speech-to-text | Accessibility, mobile input |
| AI Prompt Input | ✦ Tren | Textarea untuk LLM prompt; token counter, file attach, submit | AI tool, chatbot, copilot |
2.2 Selection & Choice
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Checkbox | 🔵 Classic | Binary on/off; multiple selection possible | Multi-select, settings, todo |
| Radio Button | 🔵 Classic | Single selection dari beberapa opsi | Single choice form |
| Toggle / Switch | 🟢 Modern | On/off toggle berbentuk pill; lebih intuitive dari checkbox | Settings, feature flag, dark mode |
| Select Dropdown | 🔵 Classic | Native HTML <select>; single selection dropdown |
Form field, filter |
| Custom Select | 🟢 Modern | Styled dropdown dengan search, icon, dan custom option | Enhanced form UX |
| Multi-select Dropdown | 🟢 Modern | Dropdown dengan checkbox per option; multiple selection | Filter, permission, category |
| Combobox | 🟢 Modern | Kombinasi input teks + dropdown; ketik untuk filter options | Search-and-select, autocomplete |
| Listbox | 🔵 Classic | List of options dalam box; single atau multiple selection | Transfer list, option list |
| Radio Card | 🟢 Modern | Radio button tapi visual card yang lebih besar | Plan selection, option picker |
| Checkbox Card | 🟢 Modern | Checkbox tapi visual card; lebih engaging dari checkbox biasa | Feature selection, preference |
| Segmented Control | 🟢 Modern | Grup button terconect; satu aktif dalam satu waktu | View toggle, filter, tab-like |
| Button Group | 🔵 Classic | Grup button yang terhubung; toggle selection | Text alignment, view mode |
| Color Picker | 🟢 Modern | Wheel, palette, atau HEX input untuk pilih warna | Design tool, customization |
| Country/Language Selector | 🟢 Modern | Dropdown dengan flag icon dan search | Internationalization |
2.3 Range, Date & Number
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Range Slider | 🔵 Classic | Slider satu handle untuk pilih nilai dalam range | Price filter, volume, setting |
| Multi-range Slider | 🟢 Modern | Dua handle untuk pilih min dan max nilai | Price range filter |
| Date Picker | 🔵 Classic | Calendar popup untuk pilih tanggal | Booking, filter, form |
| Date Range Picker | 🟢 Modern | Calendar untuk pilih rentang tanggal (from - to) | Hotel booking, analytics filter |
| Time Picker | 🔵 Classic | Interface untuk pilih jam dan menit | Scheduling, appointment |
| DateTime Picker | 🟢 Modern | Kombinasi date dan time dalam satu picker | Event creation, scheduling |
| Number Input (Stepper) | 🔵 Classic | Input angka dengan + dan - button | Quantity, count |
| Rating Input | 🔵 Classic | Bintang 1-5 untuk memberikan rating | Review, feedback, rating |
| Likert Scale | 🔵 Classic | Skala 1-5 atau 1-7 dengan label | Survey, NPS, feedback |
| File Upload | 🔵 Classic | Button atau dropzone untuk upload file | Form attachment, media upload |
| Drag & Drop Upload | 🟢 Modern | Dropzone area; drag file dari desktop | File manager, media library |
| Multi-file Upload | 🟢 Modern | Upload banyak file sekaligus dengan progress | Gallery upload, document upload |
| Image Crop | 🟢 Modern | Interface crop dan resize gambar setelah upload | Avatar, thumbnail, profile picture |
2.4 Form Layout & Validation
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Form Group / Field | 🔵 Classic | Container untuk label + input + helper text + error | Semua form |
| Inline Validation | 🟢 Modern | Validasi real-time saat ketik; error muncul segera | Modern form UX |
| Error Message | 🔵 Classic | Teks merah di bawah field yang error | Form validation |
| Helper Text | 🔵 Classic | Teks abu-abu kecil di bawah input; hint atau format info | Form UX |
| Character Counter | 🟢 Modern | Counter karakter remaining/total di bawah input | Textarea, tweet-like input |
| Form Stepper / Wizard | 🔵 Classic | Multi-step form dengan progress indicator | Checkout, onboarding, survey |
| Fieldset / Form Section | 🔵 Classic | Grup related fields dengan heading | Long form, settings page |
| Autocomplete | 🟢 Modern | Suggestion dropdown saat ketik di input | Address, search, lookup |
3. Button & Action Components
3.1 Button Variants
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Primary Button | 🔵 Classic | Tombol aksi utama; warna brand yang menonjol | CTA, submit, confirm |
| Secondary Button | 🔵 Classic | Tombol aksi sekunder; outline atau muted | Cancel, back, alternative action |
| Ghost Button | 🟢 Modern | Tombol transparan dengan border; tertiary action | Subtle action, alternate CTA |
| Destructive Button | 🟢 Modern | Tombol merah untuk aksi berbahaya (delete, remove) | Delete, remove, danger action |
| Icon Button | 🔵 Classic | Button hanya icon tanpa teks | Toolbar action, compact UI |
| Icon + Text Button | 🔵 Classic | Button dengan icon di kiri atau kanan teks | Enhanced button UX |
| Loading Button | 🟢 Modern | Button yang menampilkan spinner saat processing | Form submit, async action |
| Split Button | 🟢 Modern | Button dengan dropdown arrow terpisah untuk secondary actions | Download variants, batch action |
| FAB (Floating Action Button) | 🟢 Modern | Tombol bulat mengambang di sudut; aksi utama | Mobile-inspired web, new item |
| Toggle Button | 🔵 Classic | Button yang toggle on/off state | Bold/italic, view mode, mute |
| Chip / Badge Button | 🟢 Modern | Pill kecil yang clickable; filter atau tag action | Filter chip, removable tag |
| Copy Button | 🟢 Modern | Tombol copy ke clipboard dengan feedback checkmark | Code block, API key, URL |
| Share Button | 🟢 Modern | Trigger share sheet atau share options | Article, product, social |
| Like / Reaction Button | 🟢 Modern | Heart atau emoji reaction dengan count dan animation | Social platform, comment |
3.2 Action Menus
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Dropdown Button | 🔵 Classic | Button yang trigger dropdown menu | Action menu, more options |
| Context Menu | 🔵 Classic | Right-click menu dengan contextual actions | File manager, data table |
| Action Sheet | 🟢 Modern | Bottom sheet dengan list of actions; mobile pattern | Mobile web, destructive confirm |
| Overflow Menu (•••) | 🟢 Modern | Three-dot menu untuk additional actions | Card action, row action |
| Speed Dial | 🟢 Modern | FAB yang expand menjadi beberapa aksi kecil | Mobile-inspired, multi-action |
| Toolbar | 🔵 Classic | Row of action buttons untuk selected items atau editor | Text editor, table action, WYSIWYG |
| Contextual Toolbar | 🟢 Modern | Toolbar yang muncul saat text dipilih atau item dipilih | Notion-style selection action |
4. Display & Content Components
4.1 Card Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Basic Card | 🔵 Classic | Container dengan shadow/border; judul, konten, action | Content display unit |
| Product Card | 🔵 Classic | Card dengan gambar, nama, harga, CTA | E-commerce product grid |
| Profile Card | 🔵 Classic | Avatar, nama, role, bio, action button | User directory, team page |
| Article / Blog Card | 🔵 Classic | Thumbnail, judul, excerpt, author, date | Blog listing, news feed |
| Stat Card / KPI Card | 🟢 Modern | Satu metric besar dengan label dan trend indicator | Dashboard, analytics |
| Pricing Card | 🟢 Modern | Plan name, price, feature list, CTA | Pricing page, SaaS |
| Feature Card | 🟢 Modern | Icon, judul, deskripsi singkat fitur | Landing page, feature section |
| Testimonial Card | 🟢 Modern | Quote, avatar, nama, role | Social proof, marketing |
| Media Card | 🟢 Modern | Video atau image dominan dengan overlay text | Media platform, content |
| Horizontal Card | 🟢 Modern | Layout horizontal: gambar kiri, konten kanan | List view, search result |
| Glass Card | ✦ Tren | Card dengan glassmorphism effect | Dashboard overlay, SaaS |
| Bento Card | ✦ Tren | Card dalam asymmetric bento grid | Product page, feature showcase |
| Interactive Card (hover 3D) | 🟢 Modern | Card yang tilt 3D saat hover; perspective transform | Portfolio, premium landing |
| Flip Card | 🔵 Classic | Card yang flip 180° saat hover; front dan back | Team page, product detail |
4.2 List & Table
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Data Table | 🔵 Classic | Tabel dengan sort, filter, pagination | Admin panel, data management |
| Simple List | 🔵 Classic | Daftar item dengan separator | Menu, option list |
| List with Avatar | 🔵 Classic | List item dengan avatar, nama, subtext | User list, chat list, contact |
| Sortable Table | 🟢 Modern | Klik header untuk sort asc/desc | Data table, report |
| Filterable Table | 🟢 Modern | Filter per kolom di dalam table | Advanced data table |
| Resizable Table | 🟢 Modern | Column width bisa di-drag | Spreadsheet-like UI |
| Editable Table / Data Grid | 🟢 Modern | Cell langsung bisa diedit seperti spreadsheet | Airtable, Google Sheets style |
| Virtual List | 🟢 Modern | Render hanya item yang visible; performa untuk ribuan item | Large list, log viewer |
| Tree View | 🔵 Classic | Hierarchical list yang bisa collapse/expand | File explorer, org chart, sidebar |
| Timeline | 🔵 Classic | List event dalam urutan kronologis | Activity log, history, roadmap |
| Feed / Activity Stream | 🟢 Modern | Chronological stream of activity items | Social media, audit log |
| Kanban Board | 🟢 Modern | Kolom dengan draggable cards; status-based workflow | Project management, Trello-style |
| Comparison Table | 🟢 Modern | Tabel perbandingan fitur antar plan/produk | Pricing page, product comparison |
4.3 Media Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Image | 🔵 Classic | Responsive image dengan lazy loading | Content, product, hero |
| Image Gallery | 🔵 Classic | Grid atau masonry layout kumpulan gambar | Portfolio, media library |
| Lightbox | 🔵 Classic | Overlay untuk lihat gambar full-size | Gallery, image detail |
| Carousel / Slider | 🔵 Classic | Slideshow horizontal; arrows dan dots indicator | Hero, testimonial, product image |
| Autoplay Carousel | 🟢 Modern | Carousel yang otomatis bergerak | Marketing, banner |
| Video Player | 🟢 Modern | Custom video player dengan controls | Tutorial, product demo |
| Audio Player | 🟢 Modern | Player untuk podcast atau audio content | Media platform, podcast |
| Image Comparison Slider | 🟢 Modern | Drag divider untuk compare before/after | AI image tools, photo edit |
| 360° Image Viewer | 🟢 Modern | Drag untuk rotasi gambar 360 derajat | Product showcase, real estate |
| 3D Model Viewer | 🟢 Modern | WebGL 3D model yang bisa dirotasi dan zoom | E-commerce, product detail |
| Infinite Scroll Gallery | 🟢 Modern | Gallery yang load lebih banyak saat scroll | Pinterest, image platform |
| Masonry Gallery | 🟢 Modern | Grid dengan item variable height | Pinterest-style, photo portfolio |
| Avatar | 🔵 Classic | Gambar profil circular dengan fallback initials | User mention, comment, profile |
| Avatar Group | 🟢 Modern | Beberapa avatar overlap; + N untuk lebih banyak | Team, collaborators, member count |
4.4 Typography & Content Display
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Heading Hierarchy (H1–H6) | 🔵 Classic | Struktur heading yang jelas dengan visual hierarchy | Semua konten |
| Body Text | 🔵 Classic | Paragraf konten dengan optimal line-length | Article, description |
| Lead / Intro Text | 🔵 Classic | Teks intro lebih besar dari body; first paragraph | Article, page intro |
| Pull Quote | 🔵 Classic | Quote yang di-highlight dalam artikel | Editorial, long-form |
| Blockquote | 🔵 Classic | Kutipan dengan visual treatment berbeda | Article, testimonial |
| Code Block | 🟢 Modern | Code dengan syntax highlighting, line numbers, copy button | Documentation, tutorial |
| Inline Code | 🔵 Classic | code inline dalam paragraf |
Technical documentation |
| Callout / Alert Box | 🔵 Classic | Highlighted box untuk info, warning, tip | Documentation, article |
| Footnote | 🔵 Classic | Referensi nomor dengan penjelasan di bawah | Academic, legal, article |
| Reading Progress Bar | 🟢 Modern | Progress bar di top yang menunjukkan scroll progress | Long-form article |
| Word Count / Read Time | 🟢 Modern | Estimasi waktu baca artikel | Blog, article header |
| Highlight Text | 🟢 Modern | Teks yang di-highlight seperti stabilo | Annotation, key term |
| Abbreviation Tooltip | 🔵 Classic | Hover untuk lihat kepanjangan singkatan | Technical docs, acronym |
5. Feedback & Status Components
5.1 Notification & Alert
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Toast Notification | 🟢 Modern | Pesan singkat muncul sementara di sudut layar; auto-dismiss | Action feedback, success/error |
| Snackbar | 🟢 Modern | Seperti toast; muncul di bawah; dengan action button | Material Design notification |
| Alert Banner | 🔵 Classic | Banner di atas halaman untuk pesan penting | System notice, maintenance |
| Alert Box | 🔵 Classic | Inline alert: success, error, warning, info | Form feedback, status |
| Notification Badge | 🔵 Classic | Angka kecil di atas icon; unread count | Nav icon, tab, bell icon |
| Notification Bell + Dropdown | 🟢 Modern | Icon lonceng dengan dropdown list notifikasi | App notification center |
| Notification Center | 🟢 Modern | Panel penuh daftar semua notifikasi | Email app, project management |
| Browser Push Notification | 🟢 Modern | Notifikasi OS level dari website | PWA, news, messaging |
| In-app Announcement | 🟢 Modern | Announcement dalam app; biasanya dismissible | New feature, update notice |
| System Status Bar | 🟢 Modern | Bar di top untuk system-wide status (maintenance, degraded) | SaaS platform, web app |
5.2 Progress & Loading
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Linear Progress Bar | 🔵 Classic | Bar horizontal yang mengisi sesuai progress | File upload, step progress |
| Circular Progress | 🟢 Modern | Ring/donut yang mengisi secara circular | Compact progress, profile completion |
| Indeterminate Spinner | 🔵 Classic | Spinner berputar terus; progress tidak diketahui | Loading state, async wait |
| Skeleton Screen | 🟢 Modern | Placeholder berbentuk konten yang akan muncul | Content loading, perceived performance |
| Shimmer Skeleton | ✦ Tren | Skeleton dengan animasi shimmer yang halus | AI loading, content fetch |
| Page Loading Bar | 🟢 Modern | Thin bar di top page saat navigasi | NProgress, Next.js page load |
| Upload Progress | 🟢 Modern | Progress bar dan percentage saat upload file | File upload, media import |
| Step Progress Indicator | 🔵 Classic | Dots atau numbered steps untuk wizard/onboarding | Multi-step flow, checkout |
| Buffering Animation | 🟢 Modern | Animasi buffering untuk video atau stream | Media player, streaming |
5.3 Empty States & Error
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Empty State | 🟢 Modern | Ilustrasi + pesan + CTA saat tidak ada konten | List kosong, no search result |
| Error State (404/500) | 🔵 Classic | Halaman error dengan pesan dan navigasi kembali | Error page, not found |
| No Results State | 🟢 Modern | State khusus saat search tidak menemukan hasil | Search, filter, list |
| Offline State | 🟢 Modern | UI saat tidak ada koneksi internet | PWA, offline-first app |
| Permission Denied State | 🟢 Modern | UI saat user tidak punya akses | Gated content, auth-required |
| Error Boundary | 🟢 Modern | Fallback UI saat komponen crash; catch runtime error | React Error Boundary, fault tolerance |
5.4 Confirmation & Validation
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Confirm Dialog | 🔵 Classic | Modal konfirmasi sebelum aksi destructive | Delete confirm, danger action |
| Undo Toast | 🟢 Modern | Toast dengan tombol Undo setelah aksi; beberapa detik | Delete, archive, move |
| Inline Success State | 🟢 Modern | Feedback sukses langsung di tempat aksi terjadi | Form submit, save, update |
| Validation Checkmark | 🟢 Modern | Checkmark hijau inline di field yang valid | Password strength, form field |
| Password Strength Meter | 🟢 Modern | Visual indicator kekuatan password | Signup, password change |
| CAPTCHA | 🟢 Modern | Challenge untuk verifikasi manusia vs bot | Login, form, signup |
6. Overlay & Layer Components
6.1 Modal & Dialog
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Modal Dialog | 🔵 Classic | Overlay yang membutuhkan user action; background dimmed | Confirm, form, detail view |
| Alert Dialog | 🔵 Classic | Modal khusus untuk alert yang membutuhkan acknowledge | Critical error, system alert |
| Fullscreen Modal | 🟢 Modern | Modal yang memenuhi seluruh layar | Complex form, mobile action |
| Sheet / Half-modal | 🟢 Modern | Modal yang hanya setengah layar dari bawah | Mobile-style action panel |
| Drawer | 🟢 Modern | Panel yang slide dari sisi (kiri/kanan); background tetap visible | Sidebar, detail panel, filter |
| Light Dismiss Modal | 🟢 Modern | Modal yang close saat klik backdrop | Quick view, preview |
| Stacked Modals | 🟢 Modern | Modal di atas modal; layered overlay | Complex nested workflow |
6.2 Popover & Tooltip
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Tooltip | 🔵 Classic | Teks kecil muncul saat hover; penjelasan singkat | Icon hint, truncated text |
| Rich Tooltip | 🟢 Modern | Tooltip dengan konten lebih kaya: judul, deskripsi, link | Feature explanation, help text |
| Popover | 🟢 Modern | Seperti tooltip tapi lebih besar; bisa interaktif | Profile preview, detail popup |
| Hovercard | 🟢 Modern | Preview card saat hover link/user; GitHub-style | User mention, link preview |
| Floating UI Panel | 🟢 Modern | Panel yang float dan bisa repositioned | Contextual menu, color picker |
| Context Preview | 🟢 Modern | Preview konten saat hover link sebelum navigate | Wikipedia-style hover preview |
6.3 Menu & Dropdown
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Dropdown Menu | 🔵 Classic | List of action items yang muncul dari trigger | More actions, user menu |
| Select Menu | 🔵 Classic | Dropdown untuk pilih satu dari beberapa opsi | Form select |
| Multi-select Menu | 🟢 Modern | Dropdown dengan checkbox untuk multiple selection | Filter, permission |
| Nested Dropdown | 🔵 Classic | Dropdown dengan sub-menu yang muncul ke samping | Complex menu hierarchy |
| Context Menu | 🔵 Classic | Menu muncul saat right-click | Right-click action |
| Menu with Search | 🟢 Modern | Dropdown dengan search field di dalamnya | Long option list |
| Menu with Section | 🟢 Modern | Dropdown dengan divider dan section header | Organized action menu |
| Command Menu | ✦ Tren | Searchable command palette dengan keyboard shortcut | Developer tool, power user |
7. Layout & Container Components
7.1 Page Layout
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Header | 🔵 Classic | Area top halaman; logo, nav, actions | Semua website |
| Hero Section | 🔵 Classic | Area full-width di atas fold; headline, subtext, CTA | Landing page, marketing |
| Footer | 🔵 Classic | Area bottom halaman; links, copyright, social | Semua website |
| Sidebar | 🔵 Classic | Kolom samping untuk nav, filter, atau widget | Blog, app, documentation |
| Main Content Area | 🔵 Classic | Area konten utama; biasanya 60-70% lebar | Semua halaman |
| Container / Wrapper | 🔵 Classic | Max-width container untuk centering konten | Layout foundation |
| Section | 🔵 Classic | Blok konten dengan padding top/bottom | Landing page sections |
| Grid Layout | 🔵 Classic | CSS Grid untuk layout 2D | Dashboard, gallery, catalog |
| Flex Row / Column | 🟢 Modern | Flexbox layout untuk 1D alignment | Component internal layout |
| Split Layout | 🟢 Modern | Dua kolom dengan draggable divider | Code editor, comparison |
| Sticky Header | 🟢 Modern | Header yang tetap visible saat scroll | Navigation usability |
| Collapsible Panel | 🟢 Modern | Panel yang bisa collapse/expand | Sidebar, settings section |
| Resizable Panel | 🟢 Modern | Panel yang bisa di-drag untuk resize | IDE, code editor |
7.2 Content Organization
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Accordion | 🔵 Classic | Expandable sections; satu terbuka dalam satu waktu | FAQ, settings, menu |
| Collapse / Expand | 🔵 Classic | Toggle show/hide konten | Long content, details |
| Tabs | 🔵 Classic | Switch antar panel konten; satu active dalam satu waktu | Settings, dashboard, data view |
| Vertical Tabs | 🟢 Modern | Tab di sisi kiri/kanan secara vertikal | Settings page, documentation |
| Scrollable Tabs | 🟢 Modern | Tab yang bisa discroll horizontal jika banyak | Mobile, many categories |
| Disclosure | 🟢 Modern | <details>/<summary> HTML native expand/collapse |
FAQ, simple toggle |
| Divider | 🔵 Classic | Garis horizontal atau vertikal sebagai separator | Section break, list separator |
| Spacer | 🔵 Classic | Invisible element untuk spacing | Layout spacing |
| Aspect Ratio Box | 🟢 Modern | Container yang maintain ratio tertentu (16:9, 1:1) | Video, image container |
8. Data Visualization Components
8.1 Charts & Graphs
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Line Chart | 🔵 Classic | Garis menghubungkan data points; trend over time | Analytics, monitoring |
| Bar Chart (Vertical) | 🔵 Classic | Batang vertikal untuk perbandingan nilai | Category comparison |
| Bar Chart (Horizontal) | 🔵 Classic | Batang horizontal; lebih baik untuk label panjang | Ranking, comparison |
| Stacked Bar Chart | 🔵 Classic | Bar dengan beberapa segment stacked | Part-to-whole comparison |
| Area Chart | 🔵 Classic | Line chart dengan area diisi; untuk volume/quantity | Traffic, revenue over time |
| Pie Chart | 🔵 Classic | Lingkaran dibagi proporsi; part-to-whole | Distribution, breakdown |
| Donut Chart | 🟢 Modern | Pie dengan lubang di tengah; lebih modern | Distribution, progress |
| Scatter Plot | 🔵 Classic | Titik-titik pada dua axis; correlation | Data analysis, research |
| Bubble Chart | 🟢 Modern | Scatter plot dengan ukuran bubble sebagai dimensi ketiga | Multi-variable comparison |
| Heatmap | 🟢 Modern | Grid dengan warna intensitas menunjukkan nilai | GitHub contribution, correlation |
| Treemap | 🟢 Modern | Nested rectangles untuk hierarchical data | File size, budget breakdown |
| Funnel Chart | 🟢 Modern | Visualisasi conversion funnel yang menyempit | Sales funnel, conversion |
| Gauge / Speedometer | 🟢 Modern | Setengah lingkaran untuk single metric | KPI, health indicator |
| Sparkline | 🟢 Modern | Mini chart inline dalam teks atau tabel | Trend indicator in table |
| Candlestick Chart | 🟢 Modern | OHLC chart untuk financial data | Stock market, trading |
| Radar / Spider Chart | 🟢 Modern | Polygon chart untuk multiple attributes | Skill assessment, product comparison |
| Waterfall Chart | 🟢 Modern | Menunjukkan cumulative effect nilai positif/negatif | Financial analysis, variance |
| Sankey Diagram | 🟢 Modern | Flow diagram dengan lebar proporsional magnitude | Energy flow, user journey |
| Stream Graph | 🔴 Research | Area chart stacked yang mengalir organic | Music listening, trending topics |
8.2 Dashboard Widgets
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Metric Card / KPI Widget | 🟢 Modern | Single number besar dengan label dan trend | Dashboard header, scorecard |
| Trend Indicator | 🟢 Modern | Arrow up/down dengan percentage change | KPI card, metric comparison |
| Mini Chart Widget | 🟢 Modern | Tiny chart (sparkline) sebagai widget | Dashboard compact view |
| Activity Heatmap | 🟢 Modern | GitHub-style contribution heatmap | Productivity, engagement tracking |
| Progress Circle | 🟢 Modern | Circular progress untuk percentage completion | Goal, quota, usage |
| Data Table Widget | 🟢 Modern | Compact table dalam dashboard | Top items, recent activity |
| Map Widget | 🟢 Modern | Geographic map dengan data overlay | Location analytics, coverage |
9. Utility & Helper Components
9.1 User Assistance
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Onboarding Tour | 🟢 Modern | Step-by-step highlight fitur untuk user baru | Product onboarding, feature intro |
| Product Tour Tooltip | 🟢 Modern | Tooltip berurutan yang guide user | Feature discovery |
| Contextual Help | 🟢 Modern | ? icon atau link ke dokumentasi inline | Complex form, settings |
| Help Center Widget | 🟢 Modern | Floating help button; search docs atau chat support | SaaS platform, app |
| Walkthrough Overlay | 🟢 Modern | Overlay yang spotlight elemen sambil dim sisanya | Tutorial, new feature |
| Feature Announcement | 🟢 Modern | Modal atau banner untuk announce fitur baru | Product update, release note |
| Changelog Widget | 🟢 Modern | Popover atau page untuk lihat update terbaru | SaaS, produktivitas app |
| Keyboard Shortcut Hint | 🟢 Modern | Badge kecil menampilkan keyboard shortcut | Power user feature, tooltip |
| Keyboard Shortcut Modal | 🟢 Modern | Modal list semua keyboard shortcut (⌘?) | Developer tool, productivity |
9.2 Settings & Preferences
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Settings Page | 🔵 Classic | Halaman konfigurasi dengan sections dan sub-sections | App settings, account |
| Preference Toggle | 🟢 Modern | Toggle switch untuk setiap preference | Notification, privacy setting |
| Theme Switcher | 🟢 Modern | Toggle dark/light mode atau pilih theme | App personalization |
| Language Selector | 🟢 Modern | Dropdown untuk pilih bahasa antarmuka | Internationalized app |
| Notification Preferences | 🟢 Modern | Granular control notifikasi per tipe | Email, push, in-app notification |
| Privacy Controls | 🟢 Modern | Granular privacy setting dengan toggle | GDPR compliance, privacy |
| Cookie Consent Banner | 🟢 Modern | Banner di bottom untuk consent cookie | GDPR, CCPA compliance |
| Cookie Preference Panel | 🟢 Modern | Granular cookie category selection | Advanced cookie management |
9.3 Miscellaneous Utility
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Share Dialog | 🟢 Modern | Modal dengan opsi share: copy link, social, email | Content sharing |
| Print Preview | 🔵 Classic | Preview halaman sebelum print | Receipt, report, document |
| Export Options | 🟢 Modern | Dropdown pilihan format export (PDF, CSV, PNG) | Data export, report |
| Import Wizard | 🟢 Modern | Step-by-step import data dengan mapping | Data import, migration |
| Shortcut Key Display | 🟢 Modern | Visual keyboard shortcut dengan <kbd> styling |
Documentation, help |
| QR Code Display | 🟢 Modern | QR code untuk mobile handoff atau sharing | Auth, sharing, payment |
| Barcode Scanner | 🔴 Research | Camera-based barcode scan dalam browser | Inventory, retail, mobile |
| Color Mode Toggle | 🟢 Modern | Simple icon button untuk toggle dark/light | App UI, personal preference |
| Zoom Controls | 🟢 Modern | + dan - untuk zoom in/out canvas atau map | Map, diagram, design tool |
| Pan & Zoom Canvas | 🟢 Modern | Infinite canvas dengan pan/zoom interaction | Figma-like, whiteboard |
| Scroll Indicator | 🟢 Modern | Visual cue bahwa ada konten di bawah (chevron, fade) | Hero section, card |
| Drag Handle | 🟢 Modern | Visual handle untuk drag-and-drop reorder | List reorder, panel resize |
| Resize Handle | 🟢 Modern | Handle di corner/edge untuk resize element | Textarea, panel, widget |
10. Authentication & User Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Login Form | 🔵 Classic | Email + password + submit; dengan forgot password link | Auth flow |
| Signup Form | 🔵 Classic | Registration form dengan validation | User registration |
| Social Login Buttons | 🟢 Modern | "Sign in with Google/GitHub/Apple" button | OAuth login |
| Magic Link Input | 🟢 Modern | Email input untuk passwordless login link | Passwordless auth |
| OTP Verification | 🟢 Modern | 6-digit code input boxes | 2FA, email verification |
| Passkey Prompt | 🔴 Research | WebAuthn biometric login UI | Passwordless, biometric auth |
| User Avatar Menu | 🟢 Modern | Avatar di nav yang open dropdown: profile, settings, logout | Authenticated user menu |
| User Profile Card | 🔵 Classic | Avatar, nama, email, role display | Profile page, account page |
| Account Switcher | 🟢 Modern | Dropdown untuk switch antar multiple accounts | Multi-account app |
| Permission Gate | 🟢 Modern | UI yang hidden/disabled berdasarkan user role | RBAC UI, gated feature |
| Subscription Plan Badge | 🟢 Modern | Badge yang menunjukkan current plan | SaaS, premium feature gate |
| Invite Team Member | 🟢 Modern | Form invite via email dengan role selection | Collaboration, team SaaS |
11. E-commerce Specific Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Product Image Gallery | 🔵 Classic | Main image + thumbnail strip; zoom on hover | Product detail page |
| Product Variant Selector | 🔵 Classic | Size, color, material selector dengan visual swatch | Product options |
| Quantity Stepper | 🔵 Classic | +/- untuk pilih jumlah | Cart, product page |
| Add to Cart Button | 🔵 Classic | CTA utama produk dengan animation feedback | Product page |
| Wishlist Button | 🔵 Classic | Heart icon untuk save product | Product card, detail |
| Cart Drawer / Mini Cart | 🟢 Modern | Sidebar cart yang slide tanpa leave page | E-commerce cart |
| Cart Summary | 🔵 Classic | Items, subtotal, shipping, total | Checkout sidebar |
| Checkout Stepper | 🔵 Classic | Address → Shipping → Payment → Review | Checkout flow |
| Payment Form | 🔵 Classic | Card number, expiry, CVV dengan formatting | Checkout |
| Order Confirmation | 🔵 Classic | Success state dengan order number dan summary | Post-checkout |
| Product Filter Panel | 🔵 Classic | Sidebar filter dengan multiple criteria | Category page |
| Sort Dropdown | 🔵 Classic | Dropdown: relevance, price, newest, rating | Product listing |
| Product Badge | 🟢 Modern | New, Sale, Best Seller badge pada product card | Product card |
| Stock Indicator | 🟢 Modern | In stock, Low stock, Out of stock visual | Product detail |
| Shipping Estimator | 🟢 Modern | ZIP code input untuk estimasi shipping | Cart, product page |
| Related Products | 🔵 Classic | Grid produk terkait atau recommended | Product detail page |
| Recently Viewed | 🟢 Modern | Horizontal scroll produk yang baru dilihat | Product pages |
| Flash Sale Timer | 🟢 Modern | Countdown timer untuk limited-time offer | Promotions |
| Reviews & Ratings | 🔵 Classic | Star rating aggregate + individual reviews | Product detail |
| Q&A Section | 🟢 Modern | Customer questions and answers | Product detail |
12. Communication & Collaboration Components
| Komponen | Era | Deskripsi | Penggunaan |
|---|---|---|---|
| Chat Bubble | 🔵 Classic | Message bubble left/right untuk chat interface | Messaging, customer support |
| Chat Window | 🟢 Modern | Full chat interface: messages, input, header | Support chat, messaging app |
| Live Chat Widget | 🟢 Modern | Floating chat bubble yang open chat window | Customer support |
| Comment Thread | 🔵 Classic | Nested comments dengan reply, like, actions | Article comment, post |
| Inline Comment | 🟢 Modern | Komentar yang muncul tepat di samping konten | Document collaboration, code review |
| Reaction Picker | 🟢 Modern | Emoji reaction picker (hoverable emoji bar) | Slack-style, social platform |
| Reaction Display | 🟢 Modern | Display kumpulan emoji reactions dengan count | Message, post |
| Typing Indicator | 🟢 Modern | "..." animation saat orang lain mengetik | Chat, collaboration |
| Online Presence | 🟢 Modern | Green dot atau status indicator untuk user online/offline | Collaboration, messaging |
| Collaborative Cursor | 🔴 Research | Cursor berwarna dengan nama user lain secara realtime | Figma, Google Docs, collaborative app |
| Real-time User List | 🟢 Modern | List user yang sedang online/viewing | Collaboration tool |
| Mention Autocomplete (@) | 🟢 Modern | Dropdown saat ketik @ untuk mention user | Chat, comment, document |
| Thread / Reply Panel | 🟢 Modern | Side panel untuk melihat dan balas thread | Slack thread, email thread |
| Video Call Widget | 🔴 Research | Embedded video call dalam UI | Remote collaboration, meeting |
Ringkasan Statistik
| Kategori | Jumlah Komponen |
|---|---|
| ✦ Sedang tren saat ini (2024–2025) | 26 |
| Navigation Components | 25 |
| Form & Input Components | 47 |
| Button & Action Components | 21 |
| Display & Content Components | 52 |
| Feedback & Status Components | 27 |
| Overlay & Layer Components | 21 |
| Layout & Container Components | 22 |
| Data Visualization Components | 26 |
| Utility & Helper Components | 27 |
| Authentication & User Components | 12 |
| E-commerce Specific Components | 20 |
| Communication & Collaboration | 14 |
| Total | ~320 komponen unik |
Klasifikasi Berdasarkan Era
| Era | Jumlah | Contoh Representatif |
|---|---|---|
| 🔵 Classic | ~120 | Modal, Breadcrumb, Data Table, Carousel, Accordion |
| 🟢 Modern | ~160 | Command Palette, Skeleton, Toast, Kanban, OTP Input |
| 🔴 Research | ~15 | Collaborative Cursor, Passkey, BCI UI, Video Call Widget |
| ✦ Tren 2024–2025 | ~26 | AI Chat, Bento Grid, Glassmorphism Card, Streaming Text |
Referensi Design System
| Design System | Perusahaan | URL |
|---|---|---|
| Material Design 3 | m3.material.io | |
| Apple HIG | Apple | developer.apple.com/design |
| Fluent UI | Microsoft | fluent2.microsoft.design |
| Carbon Design System | IBM | carbondesignsystem.com |
| Ant Design | Alibaba | ant.design |
| Chakra UI | Community | chakra-ui.com |
| Radix UI | WorkOS | radix-ui.com |
| shadcn/ui | Community | ui.shadcn.com |
| Headless UI | Tailwind Labs | headlessui.com |
| GOV.UK Design System | UK Gov | design-system.service.gov.uk |
| Atlassian Design | Atlassian | atlassian.design |
| Primer | GitHub | primer.style |
| Base UI | MUI | base-ui.com |
| Ariakit | Community | ariakit.org |
Referensi Standar & Aksesibilitas
- WAI-ARIA Authoring Practices — w3.org/WAI/ARIA/apg — Pattern ARIA untuk setiap komponen
- WCAG 2.2 — w3.org/WAI/WCAG22 — Aksesibilitas web
- HTML Living Standard — html.spec.whatwg.org — Komponen native HTML
- Open UI — open-ui.org — Standarisasi UI komponen di web platform
- WebAIM — webaim.org — Accessibility resources