ZUI

Search documentation

Find a page or a heading.

Components

Every component and block this registry publishes, by category.

Each item below composes shadcn's own primitives; a page that names one lists it as a dependency. An item's title links to its page once that page is written.

Data display

  • AI Provider CardA small card for one AI provider in an overview grid, whose footer note carries a status dot and whose covering trigger selects it.
  • Chat MessageOne chat message row over upstream Message, with a line beside its leading edge while its text is still streaming.
  • Code BlockRead-only source over a collapsible card, highlighted through the shared Shiki highlighter and falling back to plain mono while the grammar loads.
  • Data TableThe composable parts of a @tanstack/react-table view - toolbar, view, pagination and view options - reading one shared table instance from context.
  • Data Table Column HeaderA @tanstack/react-table column's sort-and-hide menu, taking the column directly rather than a shared table instance.
  • File Type IconA lucide icon chosen for a file's type from its extension, decorative unless paired with the visible file name or given an aria-label.
  • Font PreviewA specimen of a font file at several sizes, one row per size, loaded through an @font-face scoped to the instance.
  • Highlighted CodeA mono code element that renders tokenized lines from the shared Shiki highlighter, falling back to its raw children until they arrive.
  • Image PreviewA frame that shows an image contained within it, over a checkerboard so transparent pixels read clearly.
  • Markdown ViewRenders a GitHub-Flavored Markdown string styled to the design tokens, with tables as the upstream Table and fenced code as a CodeBlock.
  • Model Info CardThe detail panel for one model: an identity header composed from Item parts over titled sections.
  • Tree ItemOne row of a hierarchy tree, drawn as the file tree's rows, with a depth indent, a disclosure trigger, a clickable label and an inline rename input.
  • File TreeAn accessible file tree that drives keyboard navigation and owns selection and folder expansion, controlled or uncontrolled.

Data entry

  • Chat Suggestion ItemOne starter prompt in an empty conversation, an upstream Item rendered as a button that hands its prompt to onSelectPrompt when picked.
  • Emoji Appearance Toggle GroupA single-select row of swatches for choosing the Fluent Emoji artwork style, each previewing the same sample emoji in its own style.
  • Emoji PickerA searchable, categorized emoji grid with an optional frequent row and a category nav, windowed so opening the catalog renders only what is in view.
  • Language ComboboxA searchable language picker over upstream Combobox that maps a BCP-47 code or code-language id to its option and reports the value the consumer picks.
  • Language Toggle GroupEvery language shown inline as a single-select toggle group for a small fixed set, which never deselects so a language is always chosen.
  • Number FieldA compact numeric field for a property inspector that parses arithmetic expressions, clamps to min and max, and steps on the arrow keys.
  • Password InputA password field over upstream InputGroup whose composed toggle shows or hides the password.
  • Resize HandleA vertical resize grip for a panel outside any ResizablePanelGroup that only starts dragging once the pointer crosses a small movement threshold.
  • Tag InputA tag editor with removable chips above an input that commits a new tag on Enter, comma, or blur.
  • Avatar PickerA Popover-based avatar editor whose emoji, upload and color panes edit one avatar value.
  • Frontmatter FormA frontmatter editor whose root holds the document and field setters for the consumer's composed fields.

Feedback

  • Copy ButtonAn icon button that copies its value to the clipboard, showing a check and carrying data-copied until its timeout resets it.
  • Permission CardAn inline, non-modal AI-consent request that stays in scrollback after it resolves, switching between its decision and resolved parts as the host settles its status.
  • Status IndicatorA small decorative dot colored by a semantic status tone (online, offline, busy or idle), which can pulse for a state still in progress.
  • Unsaved IndicatorThe unsaved-changes dot an editor shows on a tab, announced as an image named Unsaved changes.
  • Tool Call CardOne tool invocation in a chat transcript: a trigger row over collapsible sections, whose status badge follows the call's lifecycle state.

General

  • Icon MediaA small square that holds one glyph, tinted through the caller's className.
  • Icon LabelA label whose icon stands in for a field's text in a dense panel, tied to its control through htmlFor and sizing an unclassed child svg to a compact glyph.

Layout

  • CenterA box that centers its children on both axes, in block or inline flow, with its element swappable through render.
  • Collapsible CardA collapsible card with a header and body, open by default, on a card, muted or plain surface.
  • Floating ToolbarA floating, blurred card-color toolbar shell, a toolbar landmark around the tools the caller composes.
  • Model ListThe frame for a model list section: a header over a scrolling content area that dims any item marked unavailable.
  • Page ContainerThe centered, max-width content column of a full-width surface, sized from a named max-width scale.
  • Panel Field GroupThe tight grid for paired and triplet inputs in a property panel, with any number of columns.
  • Panel HeaderThe top strip of a side panel: one or more rows of a title and trailing actions over a bottom border.
  • Panel RowOne row of a property section, its fields beside a trailing action column that keeps every row's right edge aligned.
  • Reasoning CollapsibleA thinking disclosure that opens itself while a reasoning stream is live and closes shortly after the stream ends.

Navigation

  • Command MenuA command palette for jumping to a target: a controlled CommandDialog holding a Command that reports the chosen item's value and closes on select.
  • Editor TabOne tab in an editor's tab strip, whose close button shows the unsaved dot until the tab's hover, focus or active state reveals its X.

Blocks

  • AI Provider PickerA responsive grid of AI provider cards, from the host's entries or a sample, that calls back with the provider key a card selects.