Introduction
Navigation
TabsLayout
Tiered PageComponents for vertical writing interfaces
All components
Every page ships a live demo, the design reasoning, accessibility notes, and the exact source the CLI copies.
Actions
ButtonTrigger an immediate action. In a vertical interface, label and icon orientation must match the reading axis.Icon ButtonAn action triggered by an icon alone. Requires extra care for accessibility and hit targets in a vertical layout.ToggleA pressable element that switches between two states · on and off.
Inputs
Text
Overlays
Popover MenuA dark vertical popover that opens from a trigger, offering highlight color swatches and action items with vertical Korean labels. Scales in from its trigger origin, collapses on close.TooltipReveal supplementary information on hover or focus without navigating away.SheetA secondary surface that animates over primary content from a specific edge.DialogA modal window requiring user decision before proceeding.
Conversation
Agent
Streaming TextA model reply that types itself. The stream fills a column downward, then wraps into a new column leftward · the answer advances across the page, not down it.Thinking TraceAn agent's reasoning as a live disclosure. The spine column summarizes; steps unfold beside it along the reading direction, the running step always at the left edge.Prompt BarThe composer for an AI thread: a full-height column at the reading start. What you type stands where your sent turn will appear · the thread peels leftward from it.Approval CardA human-in-the-loop question from the agent. Options stand as columns in reading order beside the question · approve, and the card contracts to a one-column receipt.
Feedback
Lists
Vertical List CellThe primitive behind every vertical list. A row cell rotated onto the vertical axis: a full-height column with a leading edge at the top, vertical title/subtitle, and a trailing accessory at the bottom.Column AccordionA disclosure list on the vertical axis. Each item is a collapsed title column; opening one widens it sideways, unfolding its detail as new columns beside the title along the reading direction.