Mercurial
comparison design_system/COMPONENTS.md @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | |
| children | 60a876c4587a |
comparison
equal
deleted
inserted
replaced
| 253:fdf3816959cb | 254:2b6e732087ff |
|---|---|
| 1 # Zenbu UI component contracts | |
| 2 | |
| 3 Zenbu UI covers the 65 concepts in the shadcn/ui component catalog without | |
| 4 copying its React, Radix, or third-party runtime. Every Zenbu component uses | |
| 5 light DOM and keeps the corresponding native HTML control visible. | |
| 6 | |
| 7 ## Inventory | |
| 8 | |
| 9 | shadcn/ui concept | Zenbu UI element | | |
| 10 | --- | --- | | |
| 11 | Accordion | `zen-accordion` | | |
| 12 | Alert | `zen-alert` | | |
| 13 | Alert Dialog | `zen-alert-dialog` | | |
| 14 | Aspect Ratio | `zen-aspect-ratio` | | |
| 15 | Attachment | `zen-attachment` | | |
| 16 | Avatar | `zen-avatar` | | |
| 17 | Badge | `zen-badge` | | |
| 18 | Breadcrumb | `zen-breadcrumb` | | |
| 19 | Bubble | `zen-bubble` | | |
| 20 | Button | `zen-button` | | |
| 21 | Button Group | `zen-button-group` | | |
| 22 | Calendar | `zen-calendar` | | |
| 23 | Card | `zen-card` | | |
| 24 | Carousel | `zen-carousel` | | |
| 25 | Chart | `zen-chart` | | |
| 26 | Checkbox | `zen-checkbox` | | |
| 27 | Collapsible | `zen-collapsible` | | |
| 28 | Combobox | `zen-combobox` | | |
| 29 | Command | `zen-command` | | |
| 30 | Context Menu | `zen-context-menu` | | |
| 31 | Data Table | `zen-data-table` | | |
| 32 | Date Picker | `zen-date-picker` | | |
| 33 | Dialog | `zen-dialog` | | |
| 34 | Direction | `zen-direction` | | |
| 35 | Drawer | `zen-drawer` | | |
| 36 | Dropdown Menu | `zen-dropdown-menu` | | |
| 37 | Empty | `zen-empty` | | |
| 38 | Field | `zen-field` | | |
| 39 | Form | `zen-form` | | |
| 40 | Hover Card | `zen-hover-card` | | |
| 41 | Input | `zen-input` | | |
| 42 | Input Group | `zen-input-group` | | |
| 43 | Input OTP | `zen-input-otp` | | |
| 44 | Item | `zen-item` | | |
| 45 | Kbd | `zen-kbd` | | |
| 46 | Label | `zen-label` | | |
| 47 | Marker | `zen-marker` | | |
| 48 | Menubar | `zen-menubar` | | |
| 49 | Message | `zen-message` | | |
| 50 | Message Scroller | `zen-message-scroller` | | |
| 51 | Native Select | `zen-native-select` | | |
| 52 | Navigation Menu | `zen-navigation-menu` | | |
| 53 | Pagination | `zen-pagination` | | |
| 54 | Popover | `zen-popover` | | |
| 55 | Progress | `zen-progress` | | |
| 56 | Radio Group | `zen-radio-group` | | |
| 57 | Resizable | `zen-resizable` | | |
| 58 | Scroll Area | `zen-scroll-area` | | |
| 59 | Select | `zen-select` | | |
| 60 | Separator | `zen-separator` | | |
| 61 | Sheet | `zen-sheet` | | |
| 62 | Sidebar | `zen-sidebar` | | |
| 63 | Skeleton | `zen-skeleton` | | |
| 64 | Slider | `zen-slider` | | |
| 65 | Sonner | `zen-notifications` | | |
| 66 | Spinner | `zen-spinner` | | |
| 67 | Switch | `zen-switch` | | |
| 68 | Table | `zen-table` | | |
| 69 | Tabs | `zen-tabs` | | |
| 70 | Textarea | `zen-textarea` | | |
| 71 | Toast (deprecated) | `zen-notifications` | | |
| 72 | Toggle | `zen-toggle` | | |
| 73 | Toggle Group | `zen-toggle-group` | | |
| 74 | Tooltip | `zen-tooltip` | | |
| 75 | Typography | `zen-typography` | | |
| 76 | |
| 77 `zen-stack` remains a Zenbu-specific layout primitive in addition to this | |
| 78 catalog. | |
| 79 | |
| 80 ## Native HTML rules | |
| 81 | |
| 82 - Dialog, alert dialog, sheet, and drawer contain a real `dialog`. | |
| 83 - Accordion and collapsible contain `details` and `summary`. | |
| 84 - Input, textarea, select, checkbox, radio, switch, and slider contain their | |
| 85 corresponding native form controls. | |
| 86 - Calendar and date picker keep a native date value for form submission while | |
| 87 rendering the first-party keyboard month grid. The browser date-picker chrome | |
| 88 is not exposed. | |
| 89 - Table and data table contain a real `table`; pagination and breadcrumbs use | |
| 90 native links in a `nav`. | |
| 91 - Button-like components contain native `button` or `a` elements. | |
| 92 - Components do not own application data, network requests, routing, or | |
| 93 persistence. | |
| 94 | |
| 95 ## Interactive hooks | |
| 96 | |
| 97 | Elements | Required light-DOM hooks | Emitted event | | |
| 98 | --- | --- | --- | | |
| 99 | `zen-dialog`, `zen-alert-dialog`, `zen-sheet`, `zen-drawer` | `[data-zen-trigger]`, `dialog`, optional `[data-zen-close]` | native `close` | | |
| 100 | `zen-popover`, `zen-hover-card`, `zen-tooltip` | `[data-zen-trigger]`, `[data-zen-content]` | native toggle/focus events | | |
| 101 | Menu elements | `[data-zen-trigger]`, `[role="menu"]`, `[role="menuitem"]` | native click | | |
| 102 | `zen-tabs` | `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` | `zen-change` with `{ value }` | | |
| 103 | `zen-toggle` | direct `button` | `zen-change` with `{ pressed }` | | |
| 104 | `zen-toggle-group` | direct buttons with `value` | `zen-change` with `{ values }` | | |
| 105 | `zen-sidebar` | `[data-zen-sidebar-trigger]`, `[data-zen-sidebar-panel]` | `zen-change` with `{ open }` | | |
| 106 | `zen-combobox` | `input`, `[role="listbox"]`, `[role="option"]` | native `input`/`change` and `zen-change` | | |
| 107 | `zen-command` | `input`, `[role="menu"]`, `[role="menuitem"]` | `zen-command` with `{ value }` | | |
| 108 | `zen-input-otp` | one native input, optional `[data-zen-otp-slots]` | `zen-complete` with `{ value }` | | |
| 109 | `zen-calendar`, `zen-date-picker` | native date input plus generated month grid | native `input`/`change` and `zen-change` | | |
| 110 | `zen-carousel` | `[data-zen-viewport]`, `[data-zen-prev]`, `[data-zen-next]` | `zen-change` with `{ index }` | | |
| 111 | `zen-resizable` | two `[data-zen-panel]` elements and `[data-zen-handle]` | `zen-resize` with `{ percent }` | | |
| 112 | `zen-data-table` | `button[data-zen-sort]` and matching cell `data-key` values | `zen-sort` | | |
| 113 | |
| 114 All custom events bubble but remain inside their current DOM tree unless a | |
| 115 component-specific document says otherwise. Application code should listen at | |
| 116 the nearest owning feature boundary. | |
| 117 | |
| 118 ## Catalog | |
| 119 | |
| 120 Every inventory row has a route at `/components/<name>`, a rendered example, | |
| 121 and copyable HTML source in the Seobeo-backed catalog: | |
| 122 | |
| 123 ```bash | |
| 124 bazel run //design_system:dev | |
| 125 ``` |