Referensi
Cakupan
Matriks yang memetakan komponen shadcn/ui, Material 3, Tailwind UI application, dan daisyUI 5 ke halaman Citia DS, atau ke native, pattern, not planned.
Komponen mana dari empat pustaka acuan yang dipetakan ke halaman DS mana. "Native" berarti elemen HTML sudah cukup dan Native elements menatanya; "pattern" berarti komposisi yang didokumentasikan di Pola; "not planned" disertai alasan.
Cara membaca halaman ini
Setiap baris menyebut komponen pustaka dan halaman DS yang mencakupnya. Satu komponen bisa dipetakan ke halaman yang memuat beberapa varian (misalnya sheet mencakup drawer, bottom sheet, dan side sheet).
shadcn/ui
| Komponen | Slug DS | Catatan |
|---|---|---|
| Accordion | accordion | |
| Alert | alert | |
| Alert Dialog | alert-dialog | |
| Aspect Ratio | aspect-ratio | |
| Avatar | avatar | |
| Badge | badge | |
| Breadcrumb | breadcrumb | |
| Button | button | |
| Button Group | button-group | |
| Calendar | calendar | |
| Card | card | |
| Carousel | carousel | |
| Chart | chart | |
| Checkbox | checkbox | |
| Collapsible | collapsible | |
| Combobox | combobox | |
| Command | command | |
| Context Menu | context-menu | |
| Data Table | data-table | |
| Date Picker | date-picker | |
| Dialog | dialog | |
| Drawer | sheet | Panel bawah dan samping adalah varian sheet |
| Dropdown Menu | dropdown-menu | |
| Empty | empty-state | |
| Field | field | |
| Form | form | |
| Hover Card | hover-card | |
| Input | input | |
| Input Group | input-group | |
| Input OTP | otp-input | |
| Item | list | Item daftar dengan media, judul, dan aksi |
| Kbd | kbd | |
| Label | field | Label adalah bagian dari field |
| Menubar | menubar | |
| Native Select | select | |
| Navigation Menu | navigation-menu | |
| Pagination | pagination | |
| Popover | popover | |
| Progress | progress | |
| Radio Group | radio-group | |
| Resizable | resizable | |
| Scroll Area | scroll-area | |
| Select | select | Select bawaan, atau combobox untuk pencarian |
| Separator | separator | |
| Sheet | sheet | |
| Sidebar | sidebar | |
| Skeleton | skeleton | |
| Slider | slider | |
| Sonner | toast | Toast mencakupnya |
| Spinner | spinner | |
| Switch | switch | |
| Table | table | |
| Tabs | tabs | |
| Textarea | textarea | |
| Toast | toast | |
| Toggle | toggle | |
| Toggle Group | toggle-group | |
| Tooltip | tooltip | |
| Typography | typography | Halaman fondasi dan .ds-prose (Prose) |
Material 3
| Komponen | Slug DS | Catatan |
|---|---|---|
| Badges | badge | |
| Bottom app bar | bottom-navigation | Navigasi bawah dan toolbar |
| Bottom sheets | sheet | |
| Buttons: common, tonal, outlined, text | button | |
| Extended FAB, FAB | fab | |
| Icon buttons | icon-button | |
| Segmented buttons | segmented-control | |
| Split button | split-button | |
| Button groups | button-group | |
| Cards | card | |
| Carousel | carousel | |
| Checkbox | checkbox | |
| Chips: assist, filter, input, suggestion | chip | |
| Date pickers | date-picker | Rentang di date-range-picker |
| Dialogs | dialog | |
| Divider | separator | |
| Lists | list | |
| Menus | dropdown-menu | |
| Navigation bar | bottom-navigation | |
| Navigation drawer | sidebar | |
| Navigation rail | sidebar | Mode rail ringkas pada sidebar |
| Progress indicators | progress | Lingkaran di spinner |
| Radio button | radio-group | |
| Search | search-input | Palet perintah di command |
| Side sheets | sheet | |
| Sliders | slider | |
| Snackbar | toast | |
| Switch | switch | |
| Tabs | tabs | |
| Text fields | input | |
| Time pickers | time-picker | |
| Tooltips | tooltip | |
| Top app bar | navbar | navbar dan page-header |
| Toolbars | toolbar | |
| Loading indicator | spinner |
Tailwind UI application UI
| Komponen | Slug DS | Catatan |
|---|---|---|
| Application shells: stacked, sidebar, multi-column | app-shell | |
| Headings: page, card, section | page-header | Judul kartu dan bagian di card |
| Data display: calendars | calendar | |
| Data display: description lists | description-list | |
| Data display: stats | stat | |
| Lists: stacked lists | list | |
| Lists: tables | table | Interaktif di data-table |
| Lists: grid lists | stack-grid | |
| Lists: feeds | timeline | Feed aktivitas .ds-feed |
| Forms: form layouts | form | |
| Forms: input groups | input-group | |
| Forms: select menus | select | |
| Forms: sign-in and registration | auth-layout | Lihat Pola halaman |
| Forms: textareas | textarea | |
| Forms: radio groups | radio-group | |
| Forms: checkboxes | checkbox | |
| Forms: toggles | switch | |
| Forms: action panels | card | Kartu dengan aksi |
| Forms: comboboxes | combobox | |
| Feedback: alerts | alert | |
| Feedback: empty states | empty-state | |
| Navigation: navbars | navbar | |
| Navigation: pagination | pagination | |
| Navigation: tabs | tabs | |
| Navigation: vertical navigation | sidebar | |
| Navigation: sidebar navigation | sidebar | |
| Navigation: breadcrumbs | breadcrumb | |
| Navigation: progress bars | stepper | Progres langkah; bar nilai di progress |
| Navigation: command palettes | command | |
| Overlays: modal dialogs | dialog | |
| Overlays: drawers | sheet | |
| Overlays: notifications | toast | Yang menetap di notification-center |
| Elements: avatars | avatar | |
| Elements: badges | badge | |
| Elements: dropdowns | dropdown-menu | |
| Elements: buttons | button | |
| Elements: button groups | button-group | |
| Layout: containers | container | |
| Layout: cards | card | |
| Layout: list containers | list | |
| Layout: media objects | list | Item daftar dengan media |
| Layout: dividers | separator | |
| Page examples: home, detail and settings screens | pattern | Pola halaman |
daisyUI 5
| Komponen | Slug DS | Catatan |
|---|---|---|
| Accordion | accordion | |
| Alert | alert | |
| Avatar | avatar | |
| Badge | badge | |
| Breadcrumbs | breadcrumb | |
| Button | button | |
| Calendar | calendar | |
| Card | card | |
| Carousel | carousel | |
| Chat bubble | not planned | Obrolan adalah fitur produk; feed dan kartu sudah mencakup daftar pesan |
| Checkbox | checkbox | |
| Collapse | collapsible | |
| Countdown | not planned | Angka berdetak adalah dekorasi; pakai teks dengan <time> |
| Diff | not planned | Slider perbandingan visual adalah widget media khusus |
| Dock | bottom-navigation | |
| Divider | separator | |
| Drawer | sheet | Drawer navigasi adalah sidebar |
| Dropdown | dropdown-menu | |
| Fab | fab | |
| Fieldset | fieldset | |
| File input | file-upload | |
| Filter | toggle-group | Chip filter di chip |
| Footer | footer | |
| Hero | not planned | Bagian pemasaran; hero login ada di auth-layout |
| Hover 3D, Hover gallery | not planned | Gerak dekoratif; melanggar aturan kesederhanaan |
| Indicator | indicator | |
| Input | input | |
| Join | button-group | Input tergabung di input-group |
| Kbd | kbd | |
| Label | field | |
| Link | link | |
| List | list | |
| Loading | spinner | |
| Mask | not planned | Pakai CSS clip-path atau border-radius di aplikasi |
| Menu | dropdown-menu | Menu sidebar di sidebar |
| Mockup (browser, code, phone, window) | code-block | Hanya kode; mockup perangkat adalah pemasaran |
| Modal | dialog | |
| Navbar | navbar | |
| Pagination | pagination | |
| Progress | progress | |
| Radial progress | progress | Varian melingkar |
| Radio | radio-group | |
| Range | slider | |
| Rating | rating | |
| Select | select | |
| Skeleton | skeleton | |
| Stack | stack-grid | |
| Stat | stat | |
| Status | status | |
| Steps | stepper | |
| Swap | toggle | Pertukaran ikon pada toggle |
| Tabs | tabs | |
| Table | table | |
| Textarea | textarea | |
| Text rotate | not planned | Teks bergilir adalah dekorasi |
| Timeline | timeline | |
| Toast | toast | |
| Toggle | switch | |
| Tooltip | tooltip | |
| Validator | validation | |
| Theme controller | theme-switcher |
Cakupan native dan pola
Kebutuhan ini terpenuhi tanpa komponen khusus:
- Judul, paragraf, daftar, tautan, dan kode: Native elements dan Prose.
<dialog>,<details>,<progress>,<meter>, dan<input type="range|date|color">bawaan ditata di tempat; DS menambah peningkatan hanya bila perilaku bawaan tidak cukup.- Form multi-langkah, persetujuan, pekerjaan, batalkan: Alur kerja. Cari, filter, urut, aksi massal: Pola data.
- Komposisi halaman: Pola halaman.
Not planned
Item bertanda "not planned" bersifat dekoratif, khusus pemasaran, atau khusus produk. Item itu bertentangan dengan aturan tenang dan sederhana di Prinsip atau menjadi urusan aplikasi, bukan sistem desain.