Browse documentation

Components overview

Browse the components by task. Every page includes a real Zaniah rendering and the Ruby API that produces it.

Foundations

PrimitivesUse labels, icons, surfaces, and spacing to compose the structure of a screen. BadgesAdd a compact label for status, counts, or categories. AlertsShow a persistent message that needs the user's attention.

Actions

ButtonsTrigger actions with a visible label, an intentional variant, and a clear enabled or loading state. Button groupKeep related actions together without losing each button's own label and behavior.

Inputs

Checks, radios, and switchesChoose one, many, or an on/off state with controls whose semantics match the task. Sliders and progressEdit numeric values or report the progress of a task. Text inputsCollect free-form text with single-line, multiline, search, password, numeric, and tag controls. Select and comboboxPick one or several options, with optional text filtering. Date, time, and colorChoose dates, ranges, times, and colors using keyboard-friendly controls.

Overlays

Tooltips and popoversPlace short help text or contextual content near an anchor. Menus and dropdownsOffer contextual commands, application menus, or a menu-backed choice. Modal and dialogFocus attention on a decision or a temporary task. DrawerPresent secondary content in a panel attached to a window edge. ToastsConfirm brief results without interrupting the user's workflow. Command paletteSearch actions from the keyboard and execute the selected command.

Data and visualization

Tables and data gridsDisplay many rows with virtualization, sorting, selection, and optional editing. GridRender a spreadsheet-like surface with two-axis virtualization and frozen panes. Tree viewNavigate nested data such as files, projects, and settings categories. Property gridEdit typed properties in a compact, virtualized inspector. ChartsShow trends, categories, proportions, and relationships from simple Ruby data.

Workspaces

Resizable layoutsArrange application content with split panes, resizable regions, zoom, and lists. Dock workspaceBuild persistent, draggable tab groups with nested splits.

Editing

Forms and validationCompose fields, validate values, and submit a form when its inputs are valid. Code editorEdit large source buffers with syntax highlighting and viewport-only shaping. Rich textDisplay and edit styled text, inline embeds, ruby annotations, and vertical writing.