Reference
Coverage
Matrix mapping every shadcn/ui, Material 3, Tailwind UI application and daisyUI 5 component to its Citia DS page, or to native, pattern or not planned.
Which component of the four reference libraries maps to which DS page. "Native" means the HTML element is enough and Native elements styles it; "pattern" means a composition documented under Patterns; "not planned" has a reason.
How to read this page
Every row names the library component and the DS page that covers it. A component can map to a page that holds several variants (for example sheet covers drawer, bottom sheet and side sheet).
shadcn/ui
| Component | DS slug | Note |
|---|---|---|
| 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 | Bottom and side panels are variants of the 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 | List items with media, title and actions |
| Kbd | kbd | |
| Label | field | Label is part of the 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 | Native select, or combobox for search |
| Separator | separator | |
| Sheet | sheet | |
| Sidebar | sidebar | |
| Skeleton | skeleton | |
| Slider | slider | |
| Sonner | toast | Toast covers it |
| Spinner | spinner | |
| Switch | switch | |
| Table | table | |
| Tabs | tabs | |
| Textarea | textarea | |
| Toast | toast | |
| Toggle | toggle | |
| Toggle Group | toggle-group | |
| Tooltip | tooltip | |
| Typography | typography | Foundation page and .ds-prose (Prose) |
Material 3
| Component | DS slug | Note |
|---|---|---|
| Badges | badge | |
| Bottom app bar | bottom-navigation | Bottom navigation and 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 | Range in date-range-picker |
| Dialogs | dialog | |
| Divider | separator | |
| Lists | list | |
| Menus | dropdown-menu | |
| Navigation bar | bottom-navigation | |
| Navigation drawer | sidebar | |
| Navigation rail | sidebar | Collapsed rail mode of the sidebar |
| Progress indicators | progress | Circular in spinner |
| Radio button | radio-group | |
| Search | search-input | Command palette in 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 and page-header |
| Toolbars | toolbar | |
| Loading indicator | spinner |
Tailwind UI application UI
| Component | DS slug | Note |
|---|---|---|
| Application shells: stacked, sidebar, multi-column | app-shell | |
| Headings: page, card, section | page-header | Card and section headings in card |
| Data display: calendars | calendar | |
| Data display: description lists | description-list | |
| Data display: stats | stat | |
| Lists: stacked lists | list | |
| Lists: tables | table | Interactive in data-table |
| Lists: grid lists | stack-grid | |
| Lists: feeds | timeline | Activity feed .ds-feed |
| Forms: form layouts | form | |
| Forms: input groups | input-group | |
| Forms: select menus | select | |
| Forms: sign-in and registration | auth-layout | See Page patterns |
| Forms: textareas | textarea | |
| Forms: radio groups | radio-group | |
| Forms: checkboxes | checkbox | |
| Forms: toggles | switch | |
| Forms: action panels | card | Card with an action |
| 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 | Step progress; value bars in progress |
| Navigation: command palettes | command | |
| Overlays: modal dialogs | dialog | |
| Overlays: drawers | sheet | |
| Overlays: notifications | toast | Persistent in 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 | List item with media |
| Layout: dividers | separator | |
| Page examples: home, detail and settings screens | pattern | Page patterns |
daisyUI 5
| Component | DS slug | Note |
|---|---|---|
| Accordion | accordion | |
| Alert | alert | |
| Avatar | avatar | |
| Badge | badge | |
| Breadcrumbs | breadcrumb | |
| Button | button | |
| Calendar | calendar | |
| Card | card | |
| Carousel | carousel | |
| Chat bubble | not planned | Chat is a product feature; the feed and card cover message lists |
| Checkbox | checkbox | |
| Collapse | collapsible | |
| Countdown | not planned | A live ticking number is decoration; use text with <time> |
| Diff | not planned | A visual compare slider is a niche media widget |
| Dock | bottom-navigation | |
| Divider | separator | |
| Drawer | sheet | Navigation drawer is sidebar |
| Dropdown | dropdown-menu | |
| Fab | fab | |
| Fieldset | fieldset | |
| File input | file-upload | |
| Filter | toggle-group | Filter chips in chip |
| Footer | footer | |
| Hero | not planned | Marketing section; the auth hero is in auth-layout |
| Hover 3D, Hover gallery | not planned | Decorative motion; against the restraint rule |
| Indicator | indicator | |
| Input | input | |
| Join | button-group | Joined inputs in input-group |
| Kbd | kbd | |
| Label | field | |
| Link | link | |
| List | list | |
| Loading | spinner | |
| Mask | not planned | Use CSS clip-path or border-radius in the application |
| Menu | dropdown-menu | Sidebar menu in sidebar |
| Mockup (browser, code, phone, window) | code-block | Only code; device mockups are marketing |
| Modal | dialog | |
| Navbar | navbar | |
| Pagination | pagination | |
| Progress | progress | |
| Radial progress | progress | Circular variant |
| Radio | radio-group | |
| Range | slider | |
| Rating | rating | |
| Select | select | |
| Skeleton | skeleton | |
| Stack | stack-grid | |
| Stat | stat | |
| Status | status | |
| Steps | stepper | |
| Swap | toggle | Icon swap on a toggle |
| Tabs | tabs | |
| Table | table | |
| Textarea | textarea | |
| Text rotate | not planned | Cycling text is decoration |
| Timeline | timeline | |
| Toast | toast | |
| Toggle | switch | |
| Tooltip | tooltip | |
| Validator | validation | |
| Theme controller | theme-switcher |
Native and pattern coverage
These needs are met without a dedicated component:
- Headings, paragraphs, lists, links and code: Native elements and Prose.
- Native
<dialog>,<details>,<progress>,<meter>and<input type="range|date|color">are styled in place; the DS adds enhancements only where native behaviour is not enough. - Multi-step forms, approvals, jobs, undo: Workflows. Search, filter, sort, bulk actions: Data pattern.
- Page compositions: Page patterns.
Not planned
Items marked "not planned" are decorative, marketing-only or product-specific. They conflict with the calm, restrained rules in Principles or belong to the application, not to a design system.