Components

144 public components across 12 families, plus 65 compound sub-parts documented on their parent's page. Every table on every component page is extracted from source by vue-component-meta@3.3.7; nothing here is hand-typed.

Buttons

• DzButton — Primary button component.
• DzButtonGroup — Groups buttons together with shared styling context.
• DzCopyButton — Clipboard copy button with visual feedback.
• DzFab — Floating action button.
• DzIconButton — Icon-only button component.
• DzSpeedDial — a DzFab that fans out a set of secondary actions.
• DzSplitButton — Compound split button with primary action + dropdown.
• DzToggleButton — Toggleable button with pressed state.

Inputs

• DzInput — Text input component with v-model binding.
• DzInputGroup — Compound wrapper for input + addons.
• DzInputMask — format-masked text input.
• DzNumberInput — Numeric input with increment/decrement buttons.
• DzOtpInput — One-time password / PIN input using Reka UI PinInput (ADR-07).
• DzPasswordInput — Password input with visibility toggle.
• DzSearchInput — Search input with search icon and clear button.
• DzTextarea — Multiline text input with optional auto-resize.

Forms

• DzCascader — cascading multi-level select built on Reka UI Popover.
• DzCheckbox — Checkbox component using Reka UI (ADR-07).
• DzCheckboxGroup — Groups DzCheckbox components with a shared string[] model.
• DzColorPicker — Color selection component with popover panel.
• DzCombobox — Searchable select using Reka UI Combobox (ADR-07).
• DzDatePicker — Date selection using Reka UI DatePicker (ADR-07).
• DzDateRangePicker — Date range selection using Reka UI (ADR-07).
• DzFieldArray — renderless repeater for an array-valued form field, owning the bounds and the per-row ids.
• DzFileUpload — File upload with drag-and-drop support.
• DzFloatLabel — floating-label field wrapper.
• DzFormField — Compound wrapper that provides form field context.
• DzInplace — display→edit toggle wrapper.
• DzKnob — rotary numeric input rendered as an SVG circular dial (ADR-16 defineModel).
• DzListbox — Always-visible single/multi-select list using Reka UI Listbox
• DzMention — a textarea/input that surfaces a suggestion dropdown when a
• DzMultiSelect — Multi-value select using Reka UI Combobox (ADR-07).
• DzPersonaSelector — Searchable persona picker.
• DzRadio — Radio option using Reka UI (ADR-07).
• DzRadioGroup — Radio group using Reka UI RadioGroupRoot (ADR-07).
• DzRangeSlider — Dual-thumb range slider using Reka UI Slider (ADR-07).
• DzRating — star/icon rating input (ADR-16 defineModel).
• DzSelect — Select dropdown using Reka UI (ADR-07).
• DzSlider — Range slider using Reka UI Slider (ADR-07).
• DzSwitch — Toggle switch using Reka UI (ADR-07).
• DzTagsInput — free-text token / chips input.
• DzTimePicker — dropdown time picker (CoreUI-style) built on Reka UI Popover.
• DzTransfer — Dual-list transfer component.
• DzTreeSelect — a form select whose overlay panel is a DzTree (TASK-NF-04).

Cards

• DzCard — A surface container component.
• DzImageCard — Card component with a prominent image.
• DzStatCard — Statistics display card.

Layout

• DzAffix — Pins its slotted content to the viewport once it would scroll past
• DzAppShell — Application shell layout.
• DzAspectRatio — Maintains a consistent aspect ratio for its content.
• DzCollapse — Animated expand/collapse container.
• DzContainer — Centered content container.
• DzDeferredContent — viewport-triggered lazy renderer.
• DzDivider — Visual separator component.
• DzFlex — Flexbox layout component.
• DzGrid — CSS Grid layout component.
• DzMasonry — responsive masonry / cascading-column layout.
• DzPageHero — dark gradient hero band for top-level views: eyebrow,
• DzPanel — titled container with optional header actions and collapse.
• DzResizable — Compound resizable panel root using Reka UI Splitter (ADR-07).
• DzScrollArea — Custom scrollbar area using Reka UI (ADR-07).
• DzSpacer — Flexible space filler.
• DzSplitter — Naming alias for DzResizable.
• DzStack — Simplified vertical/horizontal stack layout.
• DzToolbar — horizontal action bar with start/center/end regions.

Navigation

• DzAnchor — Scrollspy section navigation (in-page table of contents).
• DzBackTop — Scroll-to-top button.
• DzBreadcrumb — Accessible breadcrumb navigation wrapper.
• DzColorModeToggle — light / dark / system theme switch.
• DzMegaMenu — horizontal (or vertical) navigation menubar whose top-level
• DzMenu — Vertical navigation menu.
• DzPagination — Page navigation using Reka UI Pagination primitives (ADR-07).
• DzSegmented — Segmented control (tab-like toggle).
• DzSidebar — Collapsible navigation sidebar root component.
• DzStepper — Step-by-step progress indicator.
• DzStepperItem — A single step within DzStepper.
• DzTabs — Tabbed interface root component using Reka UI (ADR-07).

Overlays

• DzCommandPalette — A combined command palette with search, items, and groups.
• DzConfirmDialog — Pre-composed confirmation dialog.
• DzContextMenu — Root context menu using Reka UI (ADR-07).
• DzDialog — Root compound component wrapping Reka UI DialogRoot (ADR-07).
• DzDropdownMenu — Root dropdown menu using Reka UI (ADR-07).
• DzPopconfirm — An inline confirmation popover anchored to its trigger.
• DzPopover — Root compound component wrapping Reka UI PopoverRoot (ADR-07).
• DzSheet — Slide-out side panel root component using Reka UI Dialog (ADR-07).
• DzTooltip — Root compound component wrapping Reka UI TooltipRoot (ADR-07).
• DzTour — Step-by-step product walkthrough that spotlights target elements

Feedback

• DzAlert — Contextual alert messages for user feedback.
• DzAsyncBoundary — <Suspense> wrapper that shows a loading fallback, catches the errors its subtree throws, and can time a pending child out.
• DzBadge — Compact label for status, counts, or categories.
• DzBlockUI — Content-loading mask.
• DzEmpty — Empty state placeholder component.
• DzErrorBoundary — catches the render errors its subtree throws and swaps in a fallback slot instead of letting them reach the application root.
• DzMeterGroup — Segmented proportional meter with legend.
• DzNotification — Persistent notification message with optional auto-dismiss.
• DzProgress — Visual indicator of task completion.
• DzResult — Operation result display component.
• DzRunStatusBadge — Run-status pill.
• DzScrollProgress — Scroll-position progress indicator.
• DzSkeleton — Placeholder loading state for content.
• DzSpinner — Loading indicator with rotating animation.
• DzToast — Individual toast notification using Reka UI (ADR-07).
• DzTokenProgressBar — Token-usage progress bar with threshold colors.
• GovernanceBadge — Coordinator pattern pill for team runs.
• TeamMemberBadge — Team participant status pill.

Data display

• DzAccordion — Compound accordion root using Reka UI (ADR-07).
• DzAnimatedNumber — a figure that counts from its previous value to the next.
• DzCalendar — full-surface month/week calendar for date selection and
• DzChip — Closable chip component with tone/variant styling.
• DzCodeBlock — Code display component with line numbers and copy support.
• DzCountdown — live countdown / elapsed timer.
• DzDataGrid — Compound data grid root component.
• DzDataView — list/grid switchable collection renderer.
• DzDescriptions — read-only label/value detail grid.
• DzInfiniteScroll — viewport-sentinel "load more" wrapper.
• DzList — Compound list root component.
• DzListItem — Child item within a DzList compound component.
• DzOrderList — reorderable list with drag, control-button, and keyboard reorder.
• DzTable — Compound semantic table root component.
• DzTag — Categorization tag component with tone/variant styling.
• DzTimeline — Compound timeline root component.
• DzTimelineItem — Child item within a DzTimeline compound component.
• DzTree — Hierarchical tree view with expand/collapse, selection, and checkboxes.
• DzTreeItem — Single node in a DzTree hierarchy.

Media

• DzAvatar — User avatar component with image and fallback support.
• DzAvatarGroup — Stacked avatar display with overflow count.
• DzCarousel — Image/content carousel with autoplay and navigation.
• DzEmoji — Accessible emoji renderer with consistent sizing.
• DzIcon — Icon wrapper component with consistent sizing and accessibility.
• DzImage — Enhanced image component with loading and error states.
• DzImageComparison — draggable before/after image reveal slider (ADR-16 defineModel).
• DzLightbox — Fullscreen image viewer overlay.
• DzQRCode — Token-styled QR code renderer.
• DzWatermark — tiled content watermark overlay.

Typography

• DzBlockquote — Styled blockquote component.
• DzCaption — Small caption text component.
• DzCode — Code display component (inline or block).
• DzHeading — Semantic heading component with independent visual sizing.
• DzKbd — Keyboard-key hint.
• DzRelativeTime — self-updating relative timestamp.
• DzText — General-purpose text component with semantic element and tone control.
• DzVisuallyHidden — Screen-reader-only content wrapper.

Providers

• DzProvider — one root component for every concern an application configures.
• DzThemeProvider — Provides theme context to the component tree.