Components

Every component in the library, grouped by use, generated from the docs themselves.

Grouped by use, not by source layer: Forms, Actions, Navigation, Overlays & feedback, Data display, and Layout. Whole screens are not here — they live in Showcases.

This grid is generated from the page tree, so it cannot fall behind the docs: a component has a card here exactly when it has a page.

Forms

Building a form, step by stepFrom one field to a complete form. Each step adds exactly one idea, and nothing is skipped.ControlsEvery form control in the library, grouped by what it captures. A table index — start here to find the right one.ValidationHow errors are displayed, who owns producing them, and why the library deliberately stops at the boundary.TanStack FormWiring TanStack Form and zod to Field — the setup, the validation modes, and the exact call for every control in the library.FieldThe chrome around a control — label, description, helper and error text, wired together — and the fieldset that groups several of them under one legend.Text inputsInput and Textarea — the two plain text controls, and the one attribute that styles both.EditableAn edit-in-place text field that swaps a preview for an input.CodeEditorA CodeMirror 6 host wired to the Kanzo tokens, with the language left to you.Tags InputA list of values the user invents, entered as removable chips — the one Choice control with no options to choose from.Input GroupAn input with adornments glued to its edges, sharing one border and focus ring.Native SelectThe browser's own select, styled to match the input scale.SelectA listbox of options in a popover, driven by an Ark collection.ListboxA list of selectable options with no popover of its own.ComboboxAn input that filters a list of options as you type.Facet FilterThe one surface behind every faceted filter — a trigger that counts, a listbox of values, and a way out.Radio GroupA set of options where exactly one can be chosen.Segment GroupA segmented control — one of a few views, with a sliding indicator.CheckboxA binary control, with an indeterminate state.SwitchAn on/off toggle that applies immediately.Number InputA numeric input with stepper triggers, backed by the Ark machine.SliderA draggable value along a track, with one thumb or two.RatingRate something on a fixed scale of stars.DatesOne machine with a switch — the month grid inline, or the same grid in a popover.Color PickerPicks a colour from an area, channel sliders, swatches or the eyedropper.File UploadA dropzone and file list for selecting and previewing uploads.ImageCropperA box drawn on a photograph, and the photograph read back through it.Password InputA masked input with a reveal toggle.Pin InputA sequence of single-character cells for one-time passwords and verification codes.Field ArrayRepeatable rows — N controls, a remove per row, and one add below.QuestionnaireA multi-step form that asks one question at a time, with progress, validation and navigation.

Actions

ButtonTriggers an action or navigates, with a semantic variant and size scale.Button GroupA cluster of related actions rendered as one visual unit.ToggleA two-state button that stays pressed.Action BarA floating toolbar that rises when a selection exists.CommandA filterable command palette, inline or in a dialog.ClipboardA copy-to-clipboard control whose trigger flips to a check on copy.Download TriggerA trigger that serialises data to a file and downloads it on click.

BreadcrumbShows where a page sits in the hierarchy, and the way back up.TabsSwitches between panels of related content.LinkA token-styled anchor.StepsA stepper for a multi-stage flow, with per-step content and navigation.PaginationSplits a long list across pages and moves between them.SidebarThe provider and the parts — how a sidebar is assembled, and the full reference.

Overlays & feedback

DialogA modal surface that interrupts the flow to ask for input or confirmation.PopoverA floating panel anchored to a trigger, for secondary controls that do not warrant a dialog.Hover CardA rich preview shown on hover — more than a tooltip can hold, less than a popover's commitment.TooltipA short label that appears on hover or focus, describing what a control does.MenuA dropdown list of actions, with groups, submenus and checkbox or radio selection.SheetA panel that slides in from an edge of the screen, for detail views and side forms.ToastA transient notification, created imperatively from anywhere in the app.TourA guided walkthrough that spotlights elements on the page, step by step.AlertAn inline message that needs attention but not a dialog.LoadingSpinner, Skeleton and Progress — three answers to one question, and which one your case is.

Data display

TableThe presentational table primitive — semantic elements, tokenised chrome, no data layer.Data TableA thin composable layer over TanStack Table — the parts a connected table is assembled from.StatTileA headline figure with its label, an optional signed delta and a trend sparkline — for when a single number, not a plot, is the answer.Tree ViewA keyboard-navigable hierarchy of branches and leaves.JSON Tree ViewAn expandable, syntax-coloured tree view of any JSON value.CardA bordered surface for grouping related content.ItemThe row counterpart to Card — a media · content · actions strip for lists.DataListA record read back — label and value, as a real `<dl>`.DiagnosticA severity, a message, and the positions it points at — collapsible, and jumpable.StatusA small coloured dot for a live state.SwatchA colour, drawn — decoration beside the text that names it.BadgeA compact status or category label.AvatarA user or entity image with a text fallback, a presence badge, and a stacked group.ProgressShows how far along a determinate — or indeterminate — task is.ProseStyles a block of rendered long-form content — markdown, a changelog, an article.KbdRenders a keyboard key in running text.HighlightWraps matching substrings of running text in a token-themed mark.

Analytics

ChartsA thin composable layer over Mosaic/vgplot — marks, interactors and axes as JSX, over a bring-your-own DuckDB coordinator.Chart gallerySixteen chart types written with the charts grammar — each one a ChartRoot and a handful of marks, none of them a component.

Graph

BenchmarksHow far the bounded path goes, what it costs to move the camera, and the one number that is not flat in N.

AI

AI-assisted fieldsModel assistance is two composed compounds — Complete for an inline ghost, Suggest for a strip of candidates — over pure inputs. Nothing here knows what a model is; you pass a stream.ConversationThe transcript's scroll container. It follows a stream while the reader is at the tail and stops the moment they scroll up — which is the whole component.MessageOne turn in a transcript. The speaker is declared once on the row, and every part reads it back off the DOM.Prompt inputThe composer, as a real form — so Enter and the button are one path. The submit button is one control wearing three labels.ReasoningA model's thinking, folded away. It opens itself while the thinking streams and folds a second after it stops, saying how long it took — until the reader touches it, after which it never moves on its own again.ToolOne call the model made — its name, its state, what went in and what came back. The payload is children, not a JSON prop, and that is the reason to use this one.TaskThe life of one step — pending, running, done, failed. A list of what an agent is doing, in the same four words a tool call uses.useAiStreamThe streaming engine under every AI surface — one iterator, one abort controller, one status. It never calls a model; you hand it a function returning an async iterable.useInlineCompletionGhost-text completion that does not own your input's value. It streams a continuation, debounces the request, and hands the string back for you to insert.useSuggestionsA deduped candidate strip streamed from your own source — asked once, deduped against what the field already holds, and back to idle when its answer has been taken.

Layout

ShellThe window regions — root, header, body, aside, main, footer. Structure only, no aesthetic.Skip NavThe "skip to main content" link, and the main landmark it lands on.SectionContent scaffolding — a heading with optional icon, supporting text and actions, over a body and a footer.ResizablePanels the user can resize by dragging the divider between them.Scroll AreaA scrollable region with overlay scrollbars that appear only while in use.FloatingPanelA glass surface that floats over content, with an optional drag-to-resize edge.RenderingShow and ClientOnly — the two control-flow helpers that produce no DOM of their own.SeparatorA visual or semantic divider.MadeWithA "Made with ♥ at …" attribution line, styled once.FloatPositions a child over a corner or edge of its positioned ancestor.AccordionA stack of headings that each reveal a region of content.CollapsibleA region that animates its height open and closed.PreferencesThe parts a preference menu is built from — the sections, a surface to put them on, and the containers for your own.

Hooks

useKanzoThemeRead and write the runtime theme preferences owned by KanzoThemeProvider.useIsMobileA boolean that tracks whether the viewport is below the md breakpoint.useSidebarRead and drive the sidebar's open state from anywhere below SidebarProvider.useTourContextReach the tour instance and its start handler from any control inside a Tour.useChartContextThe chart context — config, selections, coordinator, and the color / formatNumber helpers — for a DOM part of your own inside a ChartRoot.useChartContextOptionalThe chart context or null — for a part that has to work both inside a ChartRoot and standalone.useChartCapacityHow many categorical slots the live theme publishes, read off the cascade and re-read when the theme moves.useChartQueryRead a relation from the same coordinator the charts use, under the same crossfilter — for anything that is not a plot.useThemeTickRe-render when the theme changes, so a surface painted from resolved tokens repaints instead of freezing the theme it mounted with.useMosaicThe Mosaic context in one call — the coordinator, the two shared selections, and the reset a "Clear filters" button needs.useCrossfilterThe shared Selection every mark filters by — so a widget that is not a chart can follow the same brush.useSelectedEvery chart clause on the page, flattened into one plain union — the read model behind a filter-chip row.useDataTableThe engine behind DataTable — every TanStack row model wired, the state slices held for you, the instance handed back.useDataTableContextThe table instance of the enclosing DataTableRoot, typed by your row type — so a part of your own is a component like any other.

The design of Kanzo UI

Why the library is like this, what was measured, and what would reverse each of it.

What earns a nameThe rules that decide whether something becomes a component at all — the taxonomy test, the second call site, the layers that ship code and the ones that ship a guide.The references, and who winsThe case law under one sentence — Ark owns behaviour, Shark owns surface, AI Elements is a source and not a reference, and a measurement overrules all of them.Names and slotsWho owns `data-slot`, what may never be keyed on it, and the two collisions that decided a rename.The colour documentWhy a theme is a flat block of CSS with one mode, what a section is, and the five arguments the refoundation retired along with the derivation that made them.The bounded readerWhy the canvas asks instead of holding, why the camera is an address and never a question, and the nine measurements that decided the read path.