# Elements > The UI component library of By Sages — Ark UI headless components dressed in a paper-and-ink design language, with React, Vue, Solid and Svelte wrappers. ## Resources for Agents - [API catalog: every service document this site publishes](https://elements.bysages.com/.well-known/api-catalog) - [Sitemap (XML)](https://elements.bysages.com/sitemap.xml) - [Sitemap (Markdown): every page on the site](https://elements.bysages.com/sitemap.md) - [MCP server card: MCP endpoint at https://elements.bysages.com/mcp](https://elements.bysages.com/.well-known/mcp/server-card.json) - [MCP endpoint (streamable HTTP)](https://elements.bysages.com/mcp) - [llms.txt: index of the documentation for LLMs](https://elements.bysages.com/llms.txt) - [llms-full.txt: the full documentation as a single file](https://elements.bysages.com/llms-full.txt) - [Agent skills index: every skill published by this site](https://elements.bysages.com/.well-known/skills/index.json) - [Agent skill: elements-components](https://elements.bysages.com/.well-known/skills/elements-components/SKILL.md) Every page on this site is available as raw markdown: append `.md` to its URL or send `Accept: text/markdown`. # Elements ::page-hero :template[Set your docs in paper and ink.]{v-slot:title=""}:template[Elements is the UI component library of By Sages — warm paper, ink that reads, hierarchy carried by light. One token system dresses every control; one anatomy contract carries every framework.]{v-slot:description=""}::template{v-slot:links=""} :button-link[Get started]{to="https://elements.bysages.com/en/guide/introduction"}:button-link[Browse the reference]{to="https://elements.bysages.com/en/reference/button" variant="outline"} :: :: ::page-section :template[Everything a product needs]{v-slot:title=""}:template[Every component over one token system — interaction from headless state machines, every visual decision from the paper-and-ink layer.]{v-slot:description=""}::template{v-slot:cards=""} ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-swatch-book"} :: :template[A token system, not a stylesheet]{v-slot:title=""}::template{v-slot:description=""} Colors, spacing, radius, elevation, and motion resolve from `--bs-*` custom properties. Light and dark, accent pigments, contrast and density tiers — themes are data, never hardcoded styles. :: :: ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-layout-grid"} :: :template[Every component]{v-slot:title=""}::template{v-slot:description=""} Actions, forms, overlays, navigation, and data — one stylesheet serves every framework from the same anatomy of `data-scope` and `data-part`. :: :: ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-table-2"} :: :template[Data layers]{v-slot:title=""}:template[A DataTable for dense information work — sorting, pinning, tree, drag reorder, virtual windows — and Charts painted straight from the tokens.]{v-slot:description=""} :: ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-bot-message-square"} :: :template[AI primitives]{v-slot:title=""}:template[Conversation, reasoning, tools, and sources as first-class parts — the same ink, in conversation with your model.]{v-slot:description=""} :: ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-frame"} :: :template[Container-driven responsive]{v-slot:title=""}:template[Components answer to the space they are given, not the viewport — the same control composes correctly in a sidebar, a card, or a full page.]{v-slot:description=""} :: ::page-card ::template{v-slot:icon=""} :icon{name="i-lucide-sun-medium"} :: :template[Light as shadow]{v-slot:title=""}:template[A lighting engine computes the shade — source, elevation, pigment bleed — and writes it to variables the styles merely consume. Motion obeys the same grammar: light needs time; ink bleeds.]{v-slot:description=""} :: :: :: ::page-section{:reverse="true" orientation="horizontal"} :template[Up and running in a minute]{v-slot:title=""}:template[The wrappers bring the theme engine with them — install, apply the theme once, and every control speaks the same paper. Pick your framework; the components read identically.]{v-slot:description=""}::template{v-slot:links=""} :button-link[Follow the guide]{to="https://elements.bysages.com/en/guide/introduction" variant="outline" size="sm"} :: ::template{v-slot:body=""} ```bash pnpm add @bysages/vue @bysages/core ``` ::code-group ```vue [Vue] ``` ```tsx [React] import { applyTheme } from "@bysages/core"; import { Button } from "@bysages/react"; applyTheme({ mode: "light" }); export default function App() { return ; } ``` ```tsx [Solid] import { render } from "solid-js/web"; import { applyTheme } from "@bysages/core"; import { Button } from "@bysages/solid"; applyTheme({ mode: "light" }); render(() => , document.getElementById("root")); ``` ```svelte [Svelte] ``` :: :: :: ::page-section :template[Now begin]{v-slot:title=""}:template[The introduction walks the layers; the reference documents every part of every component.]{v-slot:description=""}::template{v-slot:cards=""} ::page-card{to="https://elements.bysages.com/en/guide/introduction"} :template[Read the introduction]{v-slot:title=""}:template[One premise, one style layer, one source of truth — how the pieces fit.]{v-slot:description=""} :: ::page-card{to="https://elements.bysages.com/en/reference/button"} :template[Browse the reference]{v-slot:title=""}:template[Props, emits, and anatomy for every component, straight from the source.]{v-slot:description=""} :: :: :: ## Resources for Agents - [API catalog: every service document this site publishes](https://elements.bysages.com/.well-known/api-catalog) - [Sitemap (XML)](https://elements.bysages.com/sitemap.xml) - [Sitemap (Markdown): every page on the site](https://elements.bysages.com/sitemap.md) - [MCP server card: MCP endpoint at https://elements.bysages.com/mcp](https://elements.bysages.com/.well-known/mcp/server-card.json) - [MCP endpoint (streamable HTTP)](https://elements.bysages.com/mcp) - [llms.txt: index of the documentation for LLMs](https://elements.bysages.com/llms.txt) - [llms-full.txt: the full documentation as a single file](https://elements.bysages.com/llms-full.txt) - [Agent skills index: every skill published by this site](https://elements.bysages.com/.well-known/skills/index.json) - [Agent skill: elements-components](https://elements.bysages.com/.well-known/skills/elements-components/SKILL.md) # Accordion > Accordion, dressed in the paper-and-ink system: a ruled sheet folded by quiet rows, unfolding with a spring-chevoned dissolve. The parts — Root, Item, ItemTrigger, ItemContent, ItemIndicator. ## Basic usage :component-demo{name="accordion/basic"}## Props ### ItemContent A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
disabled boolean | undefined Whether the accordion item is disabled.
value string The value of the accordion item.
### Root
Prop Type Default Description
collapsible boolean false Whether an accordion item can be closed after it has been expanded.
defaultValue string[] The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
disabled boolean Whether the accordion items are disabled
id string The unique identifier of the machine.
ids Partial<{ root: string; item(value: string): string; itemContent(value: string): string; itemTrigger(value: string): string; }> The ids of the elements in the accordion. Useful for composition.
modelValue string[] The v-model value of the accordion
multiple boolean false Whether multiple accordion items can be expanded at the same time.
orientation 'horizontal' | 'vertical' "vertical" The orientation of the accordion items.
# Affix > A nail: the wrapped content travels with the page until it reaches its offset, then stays put while the page moves on. The semantics are plain `position: sticky` — pinning is relative to the nearest *scrolling* ancestor, so the element works inside a scrollable panel exactly as it does on the page itself, and a parent with `overflow: hidden` clips the pin. Both offsets may be given: the content then holds its place inside that band. ## Basic usage :component-demo{name="affix/basic"}:component-demo{name="affix/offset-bottom"}## Props ### Affix A nail: the wrapped content travels with the page until it reaches its offset, then stays put while the page moves on. The semantics are plain `position: sticky` — pinning is relative to the nearest *scrolling* ancestor, so the element works inside a scrollable panel exactly as it does on the page itself, and a parent with `overflow: hidden` clips the pin. Both offsets may be given: the content then holds its place inside that band.
Prop Type Default Description
offsetTop String "0px" —
offsetBottom String "0px" —
# AI > A conversation column: Root is the log, Message carries a role, and the speaking parts — Response, Reasoning, Tool, Sources — part the stream. The interactive folds are the shared Collapsible wearing a `data-ai` marker, so the machine work is never ours. Parts stay agnostic of any client; consumers map their message format (e.g. the `UIMessage` parts re-exported here) onto these primitives. ## Basic usage :component-demo{name="ai/basic"}:component-demo{name="ai/loader"}## Props ### AiConversation The log itself: the column every stroke lands in, a landmark to screen readers. While the reply streams, the log follows its growth — but only while the reader rests at the bottom edge. Climb up to reread a thought and the stream stops yanking the view back down; return to the bottom and the follow resumes.
Prop Type Default Description
autoScroll Boolean true Follow the stream's growth while the reader rests at the bottom.
### AiContent The bubble's inner measure — content that belongs to neither side specifically. A styled part — no props of its own; it takes the anatomy's shared styling. ### AiActions The quiet row under a message — copy, retry, feedback. A styled part — no props of its own; it takes the anatomy's shared styling. ### AiLoader The while-it-works whisper for the in-flight turns. A styled part — no props of its own; it takes the anatomy's shared styling. # AI Action > A quiet icon button — copy, retry, thumbs. The label names it to assistive tech and as the hover title. The control itself is the shared Button in its ghost register. ## Basic usage :component-demo{name="ai-action/basic"}## Props ### AiAction A quiet icon button — copy, retry, thumbs. The label names it to assistive tech and as the hover title. The control itself is the shared Button in its ghost register.
Prop Type Default Description
label String What the button does, spoken to assistive tech and shown as the hover title — copy, retry, thumbs.
# AI Attachments > One file riding the prompt: its glyph by extension, its name and human size, and a quiet way to take it back off. Uploading reads as a dashed ghost, error as danger ink. ## Basic usage :component-demo{name="ai-attachments/basic"}## Props ### AiAttachment One file riding the prompt: its glyph by extension, its name and human size, and a quiet way to take it back off. Uploading reads as a dashed ghost, error as danger ink.
Prop Type Default Description
name String The file's name — it picks the glyph by extension.
size Number undefined The file's size in bytes, when known — rendered human.
status String as PropType<"uploading" | "ready" | "error"> "ready" The upload's state on the wire.
### AiAttachments The row the files ride in — a wrapping line of chips. A styled part — no props of its own; it takes the anatomy's shared styling. # AI Message > Whose stroke this is — the user's words sit in a recessed bubble, the assistant speaks flat on the paper. ## Basic usage :component-demo{name="ai-message/basic"}## Props ### AiMessage Whose stroke this is — the user's words sit in a recessed bubble, the assistant speaks flat on the paper.
Prop Type Default Description
role String as PropType<"user" | "assistant" | "system"> "assistant" Whose stroke this is — the user's words sit in a recessed bubble, the assistant speaks flat on the paper.
# AI Prompt Input > The prompt vessel: the shared field textarea — self-growing on the machine's autoresize — with the submit seal riding its last line. Around the body, slots answer the composer's anatomy: `header` for attachments riding above, `leading` for the tools at the text's left, `trailing` for the seal itself, `footer` for the tools beneath, and `footer-end` for the controls that close the footer row — the seal falls there by default, so a model picker dropped in rides the send's shoulder. An empty slot renders no part, so the bare vessel stays one quiet line. Controlled — bind `v-model` and take the text on `submit`. Enter sends; Shift+Enter breaks the line. While `busy` the seal becomes a stop seal and Enter holds its breath. ## Basic usage :component-demo{name="ai-prompt-input/basic"}:component-demo{name="ai-prompt-input/compose"}## Props ### AiPromptInput The prompt vessel: the shared field textarea — self-growing on the machine's autoresize — with the submit seal riding its last line. Around the body, slots answer the composer's anatomy: `header` for attachments riding above, `leading` for the tools at the text's left, `trailing` for the seal itself, `footer` for the tools beneath, and `footer-end` for the controls that close the footer row — the seal falls there by default, so a model picker dropped in rides the send's shoulder. An empty slot renders no part, so the bare vessel stays one quiet line. Controlled — bind `v-model` and take the text on `submit`. Enter sends; Shift+Enter breaks the line. While `busy` the seal becomes a stop seal and Enter holds its breath.
Prop Type Default Description
modelValue String "" The draft in the vessel — bind v-model ; it clears itself on a successful submit.
placeholder String "Send a message" The quiet invitation before the reader types.
disabled Boolean false Still the words on the canvas, but the submit seal does nothing and Enter stays a line break.
busy Boolean false The machine is working — the seal becomes a stop seal and Enter holds its breath.
mentions Object as PropType<{ items: MentionEntry[]; trigger?: string }> undefined Mention candidates for the field: pass the roster and the summon character ( @ unless told otherwise) and the vessel rides the textarea. While candidates are up, Enter inserts and the send waits.
# AI Reasoning > The model's thought, folded by the shared collapsible in its quiet register: bare ink for a trigger, the thought on one hairline. ## Basic usage :component-demo{name="ai-reasoning/basic"}## Props ### AiReasoning The model's thought, folded by the shared collapsible in its quiet register: bare ink for a trigger, the thought on one hairline.
Prop Type Default Description
label String "Thinking" The trigger's words — the fold arrives open under them.
defaultOpen Boolean false The fold arrives open when set — rides the shared collapsible.
# AI Response > Markdown set on the paper. Rendering goes through `@tanstack/markdown`, whose defaults leave raw HTML and executable links inert — streaming-safe by construction. An optional highlighter re-inks fenced code; the component stays agnostic about which engine provides it. ## Basic usage :component-demo{name="ai-response/basic"}## Props ### AiResponse Markdown set on the paper. Rendering goes through `@tanstack/markdown`, whose defaults leave raw HTML and executable links inert — streaming-safe by construction. An optional highlighter re-inks fenced code; the component stays agnostic about which engine provides it.
Prop Type Default Description
content String The markdown text to set on the paper — streamed in freely; raw HTML and executable links stay inert.
highlighter Function as PropType<(code: string, lang?: string) => string> undefined Optional code-highlighting function re-inking fenced blocks; the component stays agnostic about which engine provides it.
copyLabel String "Copy code" The copy stamp's accessible name before the copy lands.
copiedLabel String "Copied" The copy stamp's accessible name once the text has landed.
# AI Source > One place the ink came from; href and the rest ride the anchor. ## Basic usage :component-demo{name="ai-source/basic"}## Props ### AiSource One place the ink came from; href and the rest ride the anchor.
Prop Type Default Description
href String Where the ink came from — also the link text when no slot is given; opens in a new tab, referrer-free.
### AiSources The reading list under a response: where this ink came from. A styled part — no props of its own; it takes the anatomy's shared styling. # AI Suggestion > A seal-cut button proposing the next stroke; selection hands back the prompt. The shared Button in its outline register. ## Basic usage :component-demo{name="ai-suggestion/basic"}## Props ### AiSuggestion A seal-cut button proposing the next stroke; selection hands back the prompt. The shared Button in its outline register.
Prop Type Default Description
prompt String The next stroke this seal proposes — also its label; handed back whole on select .
# AI Tool > A tool call: the shared collapsible as the vessel — the name it was reached by and the state it reached in on the trigger, its input and output folded inside. ## Basic usage :component-demo{name="ai-tool/basic"}## Props ### AiTool A tool call: the shared collapsible as the vessel — the name it was reached by and the state it reached in on the trigger, its input and output folded inside.
Prop Type Default Description
name String The name the tool was reached by — shown raw on the trigger unless the label slot speaks friendlier words.
status String as PropType<"pending" | "running" | "completed" | "error"> The state the call reached — pending, running, completed, or error; stamped on the fold and whispered in the status chip.
defaultOpen Boolean false The fold arrives open when set — rides the shared collapsible.
# Alert > A notice drawn on the page: a wash of the status pigment, one heavier hairline on the leading edge, the serif for its title. ## Basic usage :component-demo{name="alert/basic"}## Props ### AlertRoot
Prop Type Default Description
status String "ink" —
### AlertIcon A styled part — no props of its own; it takes the anatomy's shared styling. ### AlertBody A styled part — no props of its own; it takes the anatomy's shared styling. ### AlertTitle A styled part — no props of its own; it takes the anatomy's shared styling. ### AlertDescription A styled part — no props of its own; it takes the anatomy's shared styling. # Angle Slider > AngleSlider, dressed in the paper-and-ink system: a flat paper dial the thumb sweeps as a pigment needle over hairline degree ticks. The parts — Root, Label, ValueText, Control, Thumb, MarkerGroup, Marker, HiddenInput. ## Basic usage :component-demo{name="angle-slider/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### MarkerGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### Marker
Prop Type Default Description
value number The value of the marker
### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the dial ladder — the diameter the needle sweeps.
aria-label string The aria-label of the slider.
aria-labelledby string The aria-labelledby of the slider.
defaultValue number 0 The initial value of the slider. Use when you don't need to control the value of the slider.
dir 'ltr' | 'rtl' "ltr" The document's text/writing direction.
disabled boolean Whether the slider is disabled.
getRootNode () => ShadowRoot | Document | Node A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
id string The unique identifier of the machine.
ids Partial<{ root: string; thumb: string; hiddenInput: string; control: string; valueText: string; }> The ids of the elements in the machine. Useful for composition.
invalid boolean Whether the slider is invalid.
modelValue number The v-model value of the angle slider
name string The name of the slider. Useful for form submission.
readOnly boolean Whether the slider is read-only.
step number 1 The step value for the slider.
### Thumb A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText A styled part — no props of its own; it takes the anatomy's shared styling. # Aspect Ratio > A frame that keeps its shape: the box holds the given ratio whatever the width it is dealt, and the child fills the frame it is given. ## Basic usage :component-demo{name="aspect-ratio/basic"}:component-demo{name="aspect-ratio/ratios"}## Props ### AspectRatio
Prop Type Default Description
ratio String "1 / 1" —
# Autocomplete > Free text with suggestions: the reader types anything, the list narrows to help, and both a pick and a custom value end up in the same `modelValue`. A preset of the combobox machinery — same parts, same styling, one job. `items` seeds the suggestion list once; matching is a case-insensitive substring unless `filter` says otherwise. ## Basic usage :component-demo{name="autocomplete/basic"}## Props ### AutoComplete Free text with suggestions: the reader types anything, the list narrows to help, and both a pick and a custom value end up in the same `modelValue`. A preset of the combobox machinery — same parts, same styling, one job. `items` seeds the suggestion list once; matching is a case-insensitive substring unless `filter` says otherwise.
Prop Type Default Description
modelValue String "" —
items Array as PropType () => [] —
placeholder String undefined —
filter Function as PropType<(item: string, input: string) => boolean> undefined Field text to match against; defaults to the item itself.
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field row.
# Avatar > Avatar, dressed in the paper-and-ink system: a circular seal on inset paper that holds initials until the image loads over them. `size` picks a control-height rung for the seal — the core styles re-point `--bs-avatar-size` per rung, and scenes can still retune the variable directly. ## Basic usage :component-demo{name="avatar/basic"}## Props ### Fallback A styled part — no props of its own; it takes the anatomy's shared styling. ### Image A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType "md" Seal diameter: one rung of the control-height ladder — the default is the md rung, level with the other control families, so an avatar rides a row without stretching it.
shape String as PropType<"circle" | "square"> "circle" The corner: round by default; square cuts it sharp, a stamp beside a round portrait.
id string The unique identifier of the machine.
ids Partial<{ root: string; image: string; fallback: string; }> The ids of the elements in the avatar. Useful for composition.
# Avatar Group > Avatars overlapping one row, each rimmed in the ground so the pile stays legible. ## Basic usage :component-demo{name="avatar-group/basic"}## Props ### AvatarGroup Avatars overlapping one row, each rimmed in the ground so the pile stays legible.
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> undefined One register for every seal: falls onto data-size for the stylesheet to re-point the avatars' measure.
# Back Top > A way home: after the page has scrolled past `threshold`, a small floating control rises at the page's corner and returns the reader to the top. The scroll itself stays native — `window.scrollTo` defers to the stylesheet's `scroll-behavior: smooth`, which reduced motion turns back into an instant jump (a moored control asks the media query directly, since a scroller of its own has no stylesheet to defer to). The button stays mounted either way so the entrance is a transition, never a pop. The control itself is the shared `Button` (outline, square) — the paper, hairline and halo are its; this family owns only the floating and the entrance. ## Basic usage :component-demo{name="back-top/basic"}:component-demo{name="back-top/custom-threshold"}## Props ### BackTop A way home: after the page has scrolled past `threshold`, a small floating control rises at the page's corner and returns the reader to the top. The scroll itself stays native — `window.scrollTo` defers to the stylesheet's `scroll-behavior: smooth`, which reduced motion turns back into an instant jump (a moored control asks the media query directly, since a scroller of its own has no stylesheet to defer to). The button stays mounted either way so the entrance is a transition, never a pop. The control itself is the shared `Button` (outline, square) — the paper, hairline and halo are its; this family owns only the floating and the entrance.
Prop Type Default Description
threshold Number 400 —
label String "Back to top" —
scrollEl Function undefined —
# Badge > A small seal of state. Ink is the neutral tone; the four semantic pigments are fixed. Subtle and outline re-register the same pigment. ## Basic usage :component-demo{name="badge/basic"}## Props ### Badge A small seal of state. Ink is the neutral tone; the four semantic pigments are fixed. Subtle and outline re-register the same pigment.
Prop Type Default Description
tone String "ink" —
variant String "solid" —
# Banner > A page-level notice, spoken across the full measure: a wash of the status pigment, one heavier hairline on the leading edge, and room for actions and a quiet close. Ink is the neutral register; the four semantic pigments are fixed. ## Basic usage :component-demo{name="banner/statuses"}## Props ### BannerRoot
Prop Type Default Description
status String as PropType<"ink" | "info" | "success" | "warning" | "danger"> "ink" —
### BannerIcon The status pigment's glyph. A styled part — no props of its own; it takes the anatomy's shared styling. ### BannerBody The column the title and description stack in. A styled part — no props of its own; it takes the anatomy's shared styling. ### BannerTitle The bold serif line — what the notice says at a glance. A styled part — no props of its own; it takes the anatomy's shared styling. ### BannerDescription The supporting line, in the quiet register. A styled part — no props of its own; it takes the anatomy's shared styling. ### BannerActions Where the reader answers — the row of buttons a banner may carry. A styled part — no props of its own; it takes the anatomy's shared styling. ### BannerClose The quiet close: a plain square-cut button; dismissal stays the consumer's state. A styled part — no props of its own; it takes the anatomy's shared styling. # Bento > The bento lattice: a grid of unequal tiles that reads as one plate. The container owns the track count; each cell claims its own span. ## Basic usage :component-demo{name="bento/basic"}## Props ### SBentoRoot The bento lattice: a grid of unequal tiles that reads as one plate. The container owns the track count; each cell claims its own span.
Prop Type Default Description
columns Number 3 —
### SBentoCell One tile: `span` claims columns, `rowSpan` claims rows — the rest of the plate stays in measure.
Prop Type Default Description
span Number 1 —
rowSpan Number 1 —
# Block Ui > A curtain over content that must wait: the blocked region keeps its shape and dims under frosted paper while a quiet wheel reports the wait. Callers own the state; the curtain only answers it. ## Basic usage :component-demo{name="block-ui/basic"}## Props ### BlockUI A curtain over content that must wait: the blocked region keeps its shape and dims under frosted paper while a quiet wheel reports the wait. Callers own the state; the curtain only answers it.
Prop Type Default Description
blocked Boolean false Whether the curtain is drawn.
# Breadcrumb > A trail of waymarks: Root wraps the nav, List the ordered trail, and each Item carries a Link — or the Current page — parted by a quiet Separator. Links take href and the rest through attributes. ## Basic usage :component-demo{name="breadcrumb/basic"}## Props ### BreadcrumbRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### BreadcrumbList A styled part — no props of its own; it takes the anatomy's shared styling. ### BreadcrumbItem A styled part — no props of its own; it takes the anatomy's shared styling. ### BreadcrumbLink A styled part — no props of its own; it takes the anatomy's shared styling. ### BreadcrumbCurrent A styled part — no props of its own; it takes the anatomy's shared styling. ### BreadcrumbSeparator A styled part — no props of its own; it takes the anatomy's shared styling. # Browser > A browser window as a vessel: title bar, the three lamps, the address well, and a body that carries whatever the site hangs in it — an iframe, a screenshot, a live page. ## Basic usage :component-demo{name="browser/basic"}## Props ### BrowserRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### BrowserTitlebar A styled part — no props of its own; it takes the anatomy's shared styling. ### BrowserUrlbar A styled part — no props of its own; it takes the anatomy's shared styling. ### BrowserBody A styled part — no props of its own; it takes the anatomy's shared styling. ### SBrowserDots The three lamps are the system's own fixed pigments — the same semantics reserved for danger, warning, and success. A styled part — no props of its own; it takes the anatomy's shared styling. # Button > The control recipe as a standalone button: the variant chooses how it rests, the tone chooses the pigment. Ink is the solemn default; any action can carry the primary weight. ## Basic usage :component-demo{name="button/basic"}## Props ### Button The control recipe as a standalone button: the variant chooses how it rests, the tone chooses the pigment. Ink is the solemn default; any action can carry the primary weight.
Prop Type Default Description
variant String "solid" How the button rests: a solid ink fill, an outline shell, a quiet ghost, or a subtle wash.
tone String "ink" The pigment the variant is inked with; ink is the solemn default, and the fixed pigments speak for their meaning.
size String "md" One rung of the control-height ladder: the small, medium, or large register.
square Boolean false Icon-only: the silhouette squares to the control height.
asChild Boolean false Render the slot's element as the button — the recipe rides on it (a NuxtLink, say) instead of wrapping it in a nested
disabled Boolean false —
# Button Group > Buttons fused into one control: the group owns only the joinery, so members keep every variant they were given — a solid action can sit beside an outline one and the seam still reads. Selection belongs to the toggle group; this is layout alone. ## Basic usage :component-demo{name="button-group/basic"}:component-demo{name="button-group/group-size"}:component-demo{name="button-group/vertical"}:component-demo{name="button-group/with-icon-buttons"}## Props ### ButtonGroup
Prop Type Default Description
orientation String as PropType<"horizontal" | "vertical"> "horizontal" The seam runs across the group (default) or down it.
size String as PropType<"sm" | "md" | "lg"> undefined One register for every member: falls onto data-size for the stylesheet to retune the buttons' heights.
radius String as PropType<"sm" | "md" | "lg" | "xl" | "2xl" | "full"> undefined The members' corner register: retunes --bs-radius-control for the whole fused shape — edges and trimmed seams keep one story.
# Calendar > The date-picker's month grid, standing on the page without its popup: always open, the trigger gone, the vessel a quiet card. The title zooms out through month and year grids; the grids themselves are the date-picker's machinery — value, range selection, and focus included. ## Basic usage :component-demo{name="calendar/basic"}## Props ### Calendar The date-picker's month grid, standing on the page without its popup: always open, the trigger gone, the vessel a quiet card. The title zooms out through month and year grids; the grids themselves are the date-picker's machinery — value, range selection, and focus included.
Prop Type Default Description
modelValue null as unknown as PropType undefined Selected date(s) — an array, as the machine speaks in ranges.
min null as unknown as PropType undefined —
max null as unknown as PropType undefined —
# Card > A vessel: round, resting at the first elevation, one hairline for its edge. Root, Header, Title, Description, Content, Footer — sections carry their own whitespace, so any subset composes. ## Basic usage :component-demo{name="card/basic"}## Props ### CardRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### CardHeader A styled part — no props of its own; it takes the anatomy's shared styling. ### CardTitle A styled part — no props of its own; it takes the anatomy's shared styling. ### CardDescription A styled part — no props of its own; it takes the anatomy's shared styling. ### CardContent A styled part — no props of its own; it takes the anatomy's shared styling. ### CardFooter A styled part — no props of its own; it takes the anatomy's shared styling. # Carousel > Carousel, dressed in the paper-and-ink system: slides ride in one hairline-clipped lane, the triggers are quiet outline controls, and the current indicator alone carries the ink. The parts — Root, Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup, Indicator, AutoplayTrigger, ProgressText. ## Basic usage :component-demo{name="carousel/basic"}## Props ### AutoplayIndicator
Prop Type Default Description
fallback string The fallback content to render when autoplay is paused.
### AutoplayTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### IndicatorGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator
Prop Type Default Description
index number The index of the indicator.
readOnly boolean | undefined false Whether the indicator is read only.
### ItemGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
index number The index of the item.
snapAlign "start" | "end" | "center" | undefined "start" The snap alignment of the item.
### NextTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### PrevTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ProgressText A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
allowMouseDrag boolean false Whether to allow scrolling via dragging with mouse
autoplay boolean | { delay: number; } false Whether to scroll automatically. The default delay is 4000ms.
autoSize boolean false Whether to enable variable width slides.
defaultPage number 0 The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel.
id string The unique identifier of the machine.
ids Partial<{ root: string; item(index: number): string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator(index: number): string; }> The ids of the elements in the carousel. Useful for composition.
inViewThreshold number | number[] 0.6 The threshold for determining if an item is in view.
loop boolean false Whether the carousel should loop around.
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the element.
padding string Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.
page number The controlled page of the carousel.
slideCount number The total number of slides. Useful for SSR to render the initial ating the snap points.
slidesPerMove number | 'auto' "auto" The number of slides to scroll at a time. When set to auto , the number of slides to scroll is determined by the slidesPerPage property.
slidesPerPage number 1 The number of slides to show at a time.
snapType 'proximity' | 'mandatory' "mandatory" The snap type of the item.
spacing string "0px" The amount of space between items.
translations carousel.IntlTranslations The localized messages to use.
# Cascade Select > A corridor of linked columns: pick a branch and the next column dissolves open beside it, until a leaf click settles the whole path. `modelValue` is the selected path (or paths, when `multiple`) — the joined labels ride the trigger. `highlightTrigger: "hover"` turns the classic cascading menu: pointing is enough to unfold. `filterable` swaps the corridor for a flat list of matching paths while a query runs — each hit still reads as its full route. ## Basic usage :component-demo{name="cascade-select/basic"}:component-demo{name="cascade-select/filterable"}## Props ### CascadeSelect A corridor of linked columns: pick a branch and the next column dissolves open beside it, until a leaf click settles the whole path. `modelValue` is the selected path (or paths, when `multiple`) — the joined labels ride the trigger. `highlightTrigger: "hover"` turns the classic cascading menu: pointing is enough to unfold. `filterable` swaps the corridor for a flat list of matching paths while a query runs — each hit still reads as its full route.
Prop Type Default Description
modelValue Array as PropType undefined —
data Array as PropType —
placeholder String "Select…" —
highlightTrigger String as PropType<"click" | "hover"> undefined —
filterable Boolean false —
multiple Boolean false —
disabled Boolean false —
invalid Boolean false —
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the trigger.
# Chart > Token-themed charts on the paper-and-ink tokens: the Chart component renders a ChartDefinition built from the mark factories, and the palette (chartColors, chartSeriesRange) hands the marks the live theme's pigments. ## Basic usage :component-demo{name="chart/area"}:component-demo{name="chart/bars"}:component-demo{name="chart/boxes"}:component-demo{name="chart/heatmap"}:component-demo{name="chart/line"}:component-demo{name="chart/series"}:component-demo{name="chart/sparkline"}:component-demo{name="chart/waffle"} # Checkbox > Checkbox, dressed in the paper-and-ink system: a square-cut seal that fills flat with primary ink when ticked, the mark springing into place. The parts — Root, Label, Control, Indicator, HiddenInput. ## Basic usage :component-demo{name="checkbox/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### GroupProvider
Prop Type Default Description
value UnwrapRef —
### Group
Prop Type Default Description
defaultValue string[] The initial value of value when uncontrolled
disabled boolean If true , the checkbox group is disabled
invalid boolean If true , the checkbox group is invalid
maxSelectedValues number The maximum number of selected values
modelValue string[] The controlled value of the checkbox group
name string The name of the input fields in the checkbox group (Useful for form submission).
readOnly boolean If true , the checkbox group is read-only
### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator
Prop Type Default Description
indeterminate boolean —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung for the control's box: the tick scales with it.
checked checkbox.CheckedState The controlled checked state of the checkbox
defaultChecked checkbox.CheckedState The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.
disabled boolean Whether the checkbox is disabled
form string The id of the form that the checkbox belongs to.
id string The unique identifier of the machine.
ids Partial<{ root: string; hiddenInput: string; control: string; label: string; }> The ids of the elements in the checkbox. Useful for composition.
invalid boolean Whether the checkbox is invalid
name string The name of the input field in a checkbox. Useful for form submission.
readOnly boolean Whether the checkbox is read-only
required boolean Whether the checkbox is required
value string "on" The value of checkbox input. Useful for form submission.
# Checkbox Group > One question, many answers: a labelled stack (or row) of the seal-cut checkboxes bound to a single array. Toggling a box adds or removes its value; the group itself is semantics (`role="group"`), the boxes stay the machine-driven originals. Inside a `Field.Root` the group picks up the field context, so the invalid and disabled states a Form routes to its name dress every box at once. ## Basic usage :component-demo{name="checkbox-group/basic"}## Props ### CheckboxGroup One question, many answers: a labelled stack (or row) of the seal-cut checkboxes bound to a single array. Toggling a box adds or removes its value; the group itself is semantics (`role="group"`), the boxes stay the machine-driven originals. Inside a `Field.Root` the group picks up the field context, so the invalid and disabled states a Form routes to its name dress every box at once.
Prop Type Default Description
modelValue Array as PropType () => [] —
options Array as PropType —
layout String as PropType<"vertical" | "horizontal"> "vertical" —
size String as PropType<"sm" | "md" | "lg"> "md" One register for every box: falls onto each root's data-size for the stylesheet to retune.
invalid Boolean false —
disabled Boolean false —
# Chip > A counting coin: the numeric value, capped at `max` with an ellipsis of the remainder ("99+"). ## Basic usage :component-demo{name="chip/basic"}## Props ### Chip A counting coin: the numeric value, capped at `max` with an ellipsis of the remainder ("99+").
Prop Type Default Description
value Number —
max Number undefined —
tone String "ink" —
variant String "solid" —
# Client Only > Render children on the client only, after hydration — the escape hatch for browser-only widgets inside server-rendered pages. Headless, like the rest of Ark's utilities: no visual layer of our own. ## Basic usage :component-demo{name="client-only/basic"} # Clipboard > Clipboard, dressed in the paper-and-ink system: a hairline value field beside an icon-sized copy trigger whose ink turns bamboo while the copy is confirmed. The parts — Root, Label, Control, Input, Trigger, Indicator, Context, HiddenInput. ## Basic usage :component-demo{name="clipboard/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the value field and its copy seal.
defaultValue string The initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard.
id string The unique identifier of the machine.
ids Partial<{ root: string; input: string; label: string; }> The ids of the elements in the clipboard. Useful for composition.
modelValue string The v-model value of the clipboard
timeout number 3000 The timeout for the copy operation
translations clipboard.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText A styled part — no props of its own; it takes the anatomy's shared styling. # Collapsible > Collapsible, dressed in the paper-and-ink system: one control on the paper, its panel dissolving open to the machine's measured height. The parts — Root, Trigger, Content, Indicator. ## Basic usage :component-demo{name="collapsible/basic"}## Props ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
collapsedHeight number | string The height of the content when collapsed.
collapsedWidth number | string The width of the content when collapsed.
defaultOpen boolean The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
disabled boolean Whether the collapsible is disabled.
id string The unique identifier of the machine.
ids Partial<{ root: string; content: string; trigger: string; }> The ids of the elements in the collapsible. Useful for composition.
lazyMount boolean false Whether to enable lazy mounting
open boolean The controlled open state of the collapsible.
unmountOnExit boolean false Whether to unmount on exit.
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. # Collection > The list and tree collections the machine-facing components compose alongside their namespace exports. ## Basic usage :component-demo{name="collection/basic"} # Color Picker > ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch on the paper, opening into an area and channel sliders where pigment is picked. The parts — Root, Label, Control, Trigger, Positioner, Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch, ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb, ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup, SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger, FormatSelect, HiddenInput, Context. ## Basic usage :component-demo{name="color-picker/basic"}## Props ### AreaBackground A styled part — no props of its own; it takes the anatomy's shared styling. ### AreaThumb A styled part — no props of its own; it takes the anatomy's shared styling. ### Area
Prop Type Default Description
xChannel ColorChannel | undefined —
yChannel ColorChannel | undefined —
### ChannelInput
Prop Type Default Description
channel ExtendedColorChannel —
orientation Orientation | undefined —
### ChannelSliderLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### ChannelSliderThumb A styled part — no props of its own; it takes the anatomy's shared styling. ### ChannelSliderTrack A styled part — no props of its own; it takes the anatomy's shared styling. ### ChannelSliderValueText A styled part — no props of its own; it takes the anatomy's shared styling. ### ChannelSlider
Prop Type Default Description
channel ColorChannel —
orientation Orientation | undefined —
### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### EyeDropperTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### FormatSelect A styled part — no props of its own; it takes the anatomy's shared styling. ### FormatTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the swatch seal.
closeOnSelect boolean false Whether to close the color picker when a swatch is selected
defaultFormat colorPicker.ColorFormat "rgba" The initial color format when rendered. Use when you don't need to control the color format of the color picker.
defaultOpen boolean The initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker.
defaultValue colorPicker.Color #000000 The initial color value when rendered. Use when you don't need to control the color value of the color picker.
disabled boolean Whether the color picker is disabled
format colorPicker.ColorFormat The controlled color format to use
id string The unique identifier of the machine.
ids Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: colorPicker.ColorChannel): string; channelSliderThumb(id: colorPicker.ColorChannel): string; }> The ids of the elements in the color picker. Useful for composition.
initialFocusEl () => HTMLElement | null The initial focus element when the color picker is opened.
inline boolean Whether the color picker is inline
invalid boolean Whether the color picker is invalid
modelValue colorPicker.Color The v-model value of the color picker
name string The name for the form input
open boolean The controlled open state of the color picker
openAutoFocus boolean true Whether to auto focus the color picker when it is opened
positioning colorPicker.PositioningOptions The positioning options for the color picker
readOnly boolean Whether the color picker is read-only
required boolean Whether the color picker is required
### SwatchGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### SwatchIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### SwatchTrigger
Prop Type Default Description
disabled boolean | undefined Whether the swatch trigger is disabled
value string | Color The color value
### Swatch
Prop Type Default Description
respectAlpha boolean | undefined Whether to include the alpha channel in the color
value string | Color The color value
### TransparencyGrid
Prop Type Default Description
size string | undefined —
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueSwatch A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText
Prop Type Default Description
format ColorStringFormat —
### View
Prop Type Default Description
format ColorFormat —
# Combobox > Combobox, dressed in the paper-and-ink system: the field carries the control recipe and its matches dissolve open as a paper vessel, the checked row taking the flat ink fill. The parts — Root, Label, Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. ## Basic usage :component-demo{name="combobox/basic"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### Empty A styled part — no props of its own; it takes the anatomy's shared styling. ### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroupLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
item CollectionItem The item to render
persistFocus boolean | undefined Whether hovering outside should clear the highlighted state
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### List A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field row.
allowCustomValue boolean Whether to allow typing custom values in the input
alwaysSubmitOnEnter boolean Whether to allow bypassing the default two-step behavior (Enter to close combobox, then Enter to submit form) and instead submit the form immediately on Enter press. This is useful for single-field autocomplete forms where Enter should submit the form directly.
autoFocus boolean Whether to autofocus the input on mount
closeOnSelect boolean Whether to close the combobox when an item is selected.
collection ListCollection The collection of items
composite boolean true Whether the combobox is a composed with other composite widgets like tabs
defaultHighlightedValue string The initial highlighted value of the combobox when rendered. Use when you don't need to control the highlighted value of the combobox.
defaultInputValue string "" The initial value of the combobox's input when rendered. Use when you don't need to control the value of the combobox's input.
defaultOpen boolean The initial open state of the combobox when rendered. Use when you don't need to control the open state of the combobox.
defaultValue string[] [] The initial value of the combobox's selected items when rendered. Use when you don't need to control the value of the combobox's selected items.
disabled boolean Whether the combobox is disabled
disableLayer boolean Whether to disable registering this a dismissable layer
form string The associate form of the combobox.
highlightedValue string The controlled highlighted value of the combobox
id string The unique identifier of the machine.
ids Partial<{ root: string; label: string; control: string; input: string; content: string; trigger: string; clearTrigger: string; item(id: string, index?: number): string; positioner: string; itemGroup(id: string | number): string; itemGroupLabel(id: string | number): string; }> The ids of the elements in the combobox. Useful for composition.
inputBehavior 'autohighlight' | 'autocomplete' | 'none' "none" Defines the auto-completion behavior of the combobox. - autohighlight : The first focused item is highlighted as the user types - autocomplete : Navigating the listbox with the arrow keys selects the item and the input is updated
inputValue string The controlled value of the combobox's input
invalid boolean Whether the combobox is invalid
loopFocus boolean true Whether to loop the keyboard navigation through the items
modelValue string[] The v-model value of the combobox
multiple boolean Whether to allow multiple selection. Good to know: When multiple is true , the selectionBehavior is automatically set to clear . It is recommended to render the selected items in a separate container.
name string The name attribute of the combobox's input. Useful for form submission
navigate (details: combobox.NavigateDetails) => void Function to navigate to the selected item
open boolean The controlled open state of the combobox
openOnChange boolean | ((details: combobox.InputValueChangeDetails) => boolean) true Whether to show the combobox when the input value changes
openOnClick boolean false Whether to open the combobox popup on initial click on the input
openOnKeyPress boolean true Whether to open the combobox on arrow key press
placeholder string The placeholder text of the combobox's input
positioning combobox.PositioningOptions { placement: "bottom-start" } The positioning options to dynamically position the menu
readOnly boolean Whether the combobox is readonly. This puts the combobox in a "non-editable" mode but the user can still interact with it
required boolean Whether the combobox is required
scrollToIndexFn (details: combobox.ScrollToIndexDetails) => void Function to scroll to a specific index
selectionBehavior 'clear' | 'replace' | 'preserve' "replace" The behavior of the combobox input when an item is selected - replace : The selected item string is set as the input value - clear : The input value is cleared - preserve : The input value is preserved
translations combobox.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
### Trigger
Prop Type Default Description
focusable boolean | undefined Whether the trigger is focusable
# Command > The command palette: a modal sheet at the top of the page carrying a search field over the caller's commands, grouped as a ledger with a keycap hint at each row. The shell is the dialog machinery — scrim, focus trap, Escape — and the searching is the combobox machinery driving our own list: the vessel and the list live inside the sheet, so the combobox renders no separate popup and the machine's content grafts onto the sheet's list. The input part carries one `as never`: its prop union outgrows what h() can resolve (TS2590). ## Basic usage :component-demo{name="command/basic"}:component-demo{name="command/searching"}## Props ### Command The command palette: a modal sheet at the top of the page carrying a search field over the caller's commands, grouped as a ledger with a keycap hint at each row. The shell is the dialog machinery — scrim, focus trap, Escape — and the searching is the combobox machinery driving our own list: the vessel and the list live inside the sheet, so the combobox renders no separate popup and the machine's content grafts onto the sheet's list. The input part carries one `as never`: its prop union outgrows what h() can resolve (TS2590).
Prop Type Default Description
items Array as PropType () => [] —
placeholder String undefined —
open Boolean undefined —
autoFilter Boolean true —
inputValue String undefined —
emptyText String "No matching commands" —
onSelect Function as PropType<(value: string) => void> undefined —
# Comment > A voice on the record: the portrait hangs left (the avatar slot), the body carries the byline from `author` and `datetime`, the ink is the default slot, and the actions slot is the row of answers. ## Basic usage :component-demo{name="comment/basic"}:component-demo{name="comment/brief"}:component-demo{name="comment/thread"}## Props ### Comment
Prop Type Default Description
author String undefined —
datetime String undefined —
# Config Provider > The four density tiers the token layer's `[data-density]` selectors name — whitespace and control heights compress, readability never does. ## Basic usage :component-demo{name="config-provider/basic"}:component-demo{name="config-provider/nested"}## Props ### ConfigProvider The declarative host for global configuration: one element that both carries the token layer's attributes — `[data-density]` and `[data-accent]` fire on any element — and provides the same values to descendants through `useConfig`, so interactive behavior (formatting, messages) and visual theming stay one decision.
Prop Type Default Description
density String as PropType undefined —
scene String as PropType undefined —
accent String undefined —
dir String as PropType<"ltr" | "rtl"> undefined —
locale String undefined —
# Container > The reading frame: content held to a measure and centered on the page. The sizes name typographic measures, not breakpoints — the page owns its edges, the container only owns how long a line of ink runs. ## Basic usage :component-demo{name="container/basic"}:component-demo{name="container/sizes"}:component-demo{name="container/unpadded"}## Props ### Container
Prop Type Default Description
size String "readable" The typographic measure the ink runs to: narrow, readable, wide, or the full frame.
padding Boolean true —
# Data View > One vessel, two layouts: the caller renders each record through the item slot, the view lays the records out as a ledger or a lattice and — when a page size is given — pages them with the pagination family's own parts rather than a second implementation. ## Basic usage :component-demo{name="data-view/basic"}## Props ### DataView One vessel, two layouts: the caller renders each record through the item slot, the view lays the records out as a ledger or a lattice and — when a page size is given — pages them with the pagination family's own parts rather than a second implementation.
Prop Type Default Description
items Array as PropType —
layout String as PropType<"list" | "grid"> "list" Ledger rows or a lattice of cards.
pageSize Number as PropType undefined Records per page; leave unset to show everything at once.
# Date Input > DateInput, dressed in the paper-and-ink system: a segmented field where the focused segment takes the flat ink fill. The parts — Root, Label, Control, SegmentGroup, Segment, SegmentContext, HiddenInput. ## Basic usage :component-demo{name="date-input/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the segmented field.
allSegments dateInput.Props['allSegments'] Whether to include all date/time segments based on the granularity.
defaultPlaceholderValue dateInput.Props['defaultPlaceholderValue'] The initial placeholder date value when rendered.
defaultValue dateInput.DateValue[] The initial selected date(s) when rendered. Use when you don't need to control the selected date(s).
disabled boolean Whether the date input is disabled.
form string The associate form of the hidden input element.
format dateInput.Props['format'] The format of the date to display in the input.
formatter dateInput.Props['formatter'] The formatter used to format the date segments.
granularity dateInput.Props['granularity'] The granularity of the date input.
hideTimeZone boolean false Whether to hide the time zone segment when the value is a ZonedDateTime .
hourCycle dateInput.Props['hourCycle'] The hour cycle used for formatting time segments.
id string The unique identifier of the machine.
ids dateInput.Props['ids'] The ids of the elements in the date input. Useful for composition.
invalid boolean Whether the date input is invalid.
locale string "en-US" The locale (BCP 47 language tag) to use when formatting the date.
max dateInput.DateValue The maximum date that can be selected.
min dateInput.DateValue The minimum date that can be selected.
modelValue dateInput.DateValue[] The v-model value of the date input.
name string The name attribute of the hidden input element.
placeholderValue dateInput.Props['placeholderValue'] The placeholder date value used to generate placeholder segments.
readOnly boolean Whether the date input is read-only.
required boolean Whether the date input is required.
selectionMode dateInput.SelectionMode "single" The selection mode of the date input. - single - only one date can be selected - range - a range of dates can be selected
shouldForceLeadingZeros boolean Whether to force leading zeros for numeric segments.
timeZone string "UTC" The time zone to use.
translations dateInput.Props['translations'] The localized messages to use.
value dateInput.DateValue[] The controlled selected date(s).
### SegmentContext A styled part — no props of its own; it takes the anatomy's shared styling. ### SegmentGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### Segment A styled part — no props of its own; it takes the anatomy's shared styling. # Date Picker > DatePicker, dressed in the paper-and-ink system: the popup dissolves in on elevation, selected days take the flat ink fill, and range middles run subtle with cut corners. The parts — Root, Label, Control, Input, Trigger, ClearTrigger, Positioner, Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger, NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. ## Basic usage :component-demo{name="date-picker/basic"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### Input
Prop Type Default Description
fixOnBlur boolean | undefined true Whether to fix the input value on blur.
index number | undefined The index of the input to focus.
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### MonthSelect A styled part — no props of its own; it takes the anatomy's shared styling. ### NextTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### PresetTrigger
Prop Type Default Description
value PresetTriggerValue —
### PrevTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### RangeText A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field row.
closeOnSelect boolean true Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple .
createCalendar (identifier: datePicker.CalendarIdentifier) => datePicker.Calendar A function that creates a Calendar object for a given calendar identifier. Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.) without bundling all calendars by default. @example import { createCalendar } from "@internationalized/date" { locale: "fa-IR", createCalendar }
defaultFocusedValue datePicker.DateValue The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
defaultOpen boolean The initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
defaultValue datePicker.DateValue[] The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
defaultView datePicker.DateView "day" The default view of the calendar
disabled boolean Whether the calendar is disabled.
fixedWeeks boolean Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
focusedValue datePicker.DateValue The controlled focused date.
format (date: datePicker.DateValue, details: datePicker.LocaleDetails) => string The format of the date to display in the input.
id string The unique identifier of the machine.
ids Partial<{ root: string; label(index: number): string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; cellTrigger(id: string): string; prevTrigger(view: datePicker.DateView): string; nextTrigger(view: datePicker.DateView): string; viewTrigger(view: datePicker.DateView): string; clearTrigger: string; control: string; input(index: number): string; trigger: string; monthSelect: string; yearSelect: string; positioner: string; }> The ids of the elements in the date picker. Useful for composition.
inline boolean Whether the date picker is inline
invalid boolean Whether the date picker is in an invalid state
isDateUnavailable (date: datePicker.DateValue, locale: string) => boolean Returns whether a date of the calendar is available.
locale string "en-US" The locale (BCP 47 language tag) to use when formatting the date.
max datePicker.DateValue The maximum date that can be selected.
maxSelectedDates number The maximum number of dates that can be selected. This is only applicable when selectionMode is multiple .
maxView datePicker.DateView "year" The maximum view of the calendar
min datePicker.DateValue The minimum date that can be selected.
minView datePicker.DateView "day" The minimum view of the calendar
modelValue datePicker.DateValue[] The v-model value of the date picker
name string The name attribute of the input element.
numOfMonths number The number of months to display.
open boolean The controlled open state of the date picker
openOnClick boolean false Whether to open the calendar when the input is clicked.
outsideDaySelectable boolean false Whether day outside the visible range can be selected.
parse (value: string, details: datePicker.LocaleDetails) => datePicker.DateValue | undefined Function to parse the date from the input back to a DateValue.
placeholder string The placeholder text to display in the input.
positioning datePicker.PositioningOptions The user provided options used to position the date picker content
readOnly boolean Whether the calendar is read-only.
required boolean Whether the date picker is required
selectionMode datePicker.SelectionMode "single" The selection mode of the calendar. - single - only one date can be selected - multiple - multiple dates can be selected - range - a range of dates can be selected
showWeekNumbers boolean Whether to show the week number column in the day view.
startOfWeek number The first day of the week. 0 - Sunday 1 - Monday 2 - Tuesday 3 - Wednesday 4 - Thursday 5 - Friday 6 - Saturday
timeZone string "UTC" The time zone to use
translations datePicker.IntlTranslations The localized messages to use.
view datePicker.DateView The view of the calendar
### TableBody A styled part — no props of its own; it takes the anatomy's shared styling. ### TableCellTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### TableCell
Prop Type Default Description
value Reactive —
### TableHead A styled part — no props of its own; it takes the anatomy's shared styling. ### TableHeader A styled part — no props of its own; it takes the anatomy's shared styling. ### TableRow A styled part — no props of its own; it takes the anatomy's shared styling. ### Table
Prop Type Default Description
columns number | undefined —
id string | undefined —
view DateView | undefined —
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText
Prop Type Default Description
placeholder string | undefined Text to display when no date is selected.
separator string | undefined ", " The separator to use between multiple date values when using default rendering.
### ViewControl A styled part — no props of its own; it takes the anatomy's shared styling. ### ViewTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### View
Prop Type Default Description
view DateView —
### WeekNumberCell
Prop Type Default Description
week DateValue[] —
weekIndex number —
### WeekNumberHeaderCell A styled part — no props of its own; it takes the anatomy's shared styling. ### YearSelect A styled part — no props of its own; it takes the anatomy's shared styling. # Deferred Content > Content that waits to be worth rendering: the slot stays off the tree until the placeholder scrolls near the viewport, then mounts once and stays. The placeholder is drawn by the caller through the placeholder slot, so the late arrival costs no layout shift it cannot predict. ## Basic usage :component-demo{name="deferred-content/basic"}## Props ### DeferredContent Content that waits to be worth rendering: the slot stays off the tree until the placeholder scrolls near the viewport, then mounts once and stays. The placeholder is drawn by the caller through the placeholder slot, so the late arrival costs no layout shift it cannot predict.
Prop Type Default Description
threshold Number as PropType 0.2 How much of the placeholder must be visible before the content mounts, from 0 (any pixel) to 1 (the whole box).
# Descriptions > A ledger laid flat: term and detail pairs in one quiet grid. The horizontal layout reads as a table of two columns; the vertical one stacks each pair for narrow measures. ## Basic usage :component-demo{name="descriptions/basic"}:component-demo{name="descriptions/bordered"}## Props ### Descriptions
Prop Type Default Description
layout String as PropType<"horizontal" | "vertical"> "horizontal" —
bordered Boolean false The framed register: one hairline round the whole, terms on inset paper.
column Number 1 Pairs across the grid: one ledger per column.
### DescriptionsItem
Prop Type Default Description
span Number 1 Column pairs this entry stretches across.
### DescriptionsTerm A styled part — no props of its own; it takes the anatomy's shared styling. ### DescriptionsDetail A styled part — no props of its own; it takes the anatomy's shared styling. # Dialog > Dialog, dressed in the paper-and-ink system: the sheet dissolves in on elevation, the backdrop fades, and nested overlays stack through the shared z-index ladder. The parts — Root, Trigger, Backdrop, Positioner, Content, Title, Description, CloseTrigger. ## Basic usage :component-demo{name="dialog/basic"}## Props ### Backdrop A styled part — no props of its own; it takes the anatomy's shared styling. ### CloseTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Description A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
aria-label string Human readable label for the dialog, in event the dialog title is not rendered
closeOnEscape boolean true Whether to close the dialog when the escape key is pressed
closeOnInteractOutside boolean true Whether to close the dialog when the outside is clicked
defaultOpen boolean false The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.
defaultTriggerValue string | null The initial trigger value when rendered. Use when you don't need to control the trigger value.
finalFocusEl () => HTMLElement | null Element to receive focus when the dialog is closed
id string The unique identifier of the machine.
ids Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }> The ids of the elements in the dialog. Useful for composition.
initialFocusEl () => HTMLElement | null Element to receive focus when the dialog is opened
modal boolean true Whether to prevent pointer interaction outside the element and hide all content below it
open boolean The controlled open state of the dialog
persistentElements (() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
preventScroll boolean true Whether to prevent scrolling behind the dialog when it's opened
restoreFocus boolean Whether to restore focus to the element that had focus before the dialog was opened
role 'dialog' | 'alertdialog' "dialog" The dialog's role
trapFocus boolean true Whether to trap focus inside the dialog when it's opened
triggerValue string | null The value of the trigger that currently open the dialog
### Title A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger
Prop Type Default Description
value string The value that identifies this specific trigger
# Dock > The magnifying dock: a floating rail whose icons swell toward the hand. The wrapper measures per item and writes --bs-dock-scale; CSS eases the chase, so no spring engine rides along. ## Basic usage :component-demo{name="dock/basic"}## Props ### SDockRoot The magnifying dock: a floating rail whose icons swell toward the hand. The wrapper measures per item and writes --bs-dock-scale; CSS eases the chase, so no spring engine rides along.
Prop Type Default Description
maxScale Number 1.5 —
radius Number 96 —
### SDockItem One moored place in the rail: whatever slots in grows from the floor, never from its center. A styled part — no props of its own; it takes the anatomy's shared styling. # Download Trigger > Trigger a client-side download of in-memory data from a plain element — the headless counterpart to a save button. Also exposed: the composable beneath the component, for custom triggers. ## Basic usage :component-demo{name="download-trigger/basic"} # Drawer > Drawer, dressed in the paper-and-ink system: a full-height sheet cut flush to the edge it rises from, sliding on the machine's translate under the grabber's hand. The parts — Root, Trigger, Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title, Description, CloseTrigger, SwipeArea. ## Basic usage :component-demo{name="drawer/basic"}:component-demo{name="drawer/direction"}## Props ### Backdrop A styled part — no props of its own; it takes the anatomy's shared styling. ### CloseTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Description A styled part — no props of its own; it takes the anatomy's shared styling. ### GrabberIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Grabber A styled part — no props of its own; it takes the anatomy's shared styling. ### IndentBackground A styled part — no props of its own; it takes the anatomy's shared styling. ### Indent A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
closeOnEscape boolean true Whether to close the drawer when the escape key is pressed.
closeOnInteractOutside boolean true Whether to close the drawer when the outside is clicked.
closeThreshold number 0.25 The threshold distance for dismissing the drawer.
defaultOpen boolean The initial open state of the drawer.
defaultSnapPoint drawer.SnapPoint | null 1 The default snap point of the drawer.
defaultTriggerValue string | null The initial trigger value when rendered. Use when you don't need to control the trigger value.
finalFocusEl () => HTMLElement | null Element to receive focus when the sheet is closed.
id string The unique identifier of the machine.
ids Partial<{ backdrop: string; positioner: string; content: string; title: string; trigger: string; grabber: string; grabberIndicator: string; closeTrigger: string; }> The ids of the elements in the drawer. Useful for composition.
initialFocusEl () => HTMLElement | null Element to receive focus when the sheet is opened.
modal boolean true Whether to prevent pointer interaction outside the element and hide all content below it.
open boolean Whether the drawer is open.
preventDragOnScroll boolean true Whether to prevent dragging on scrollable elements.
preventScroll boolean true Whether to prevent scrolling behind the sheet when it's opened
restoreFocus boolean Whether to restore focus to the element that had focus before the sheet was opened.
role 'dialog' | 'alertdialog' "dialog" The sheet's role
snapPoint drawer.SnapPoint | null The currently active snap point.
snapPoints (number | string)[] [1] The snap points of the drawer.
snapToSequentialPoints boolean false Whether the drawer should snap to sequential points when swiping.
swipeDirection drawer.SwipeDirection "down" The direction in which the drawer can be swiped.
swipeVelocityThreshold number 700 The threshold velocity (in pixels/s) for closing the drawer.
trapFocus boolean true Whether to trap focus inside the sheet when it's opened.
triggerValue string | null The value of the trigger that currently open the drawer
### Stack A styled part — no props of its own; it takes the anatomy's shared styling. ### SwipeArea A styled part — no props of its own; it takes the anatomy's shared styling. ### Title A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. # Dynamic Input > A column of entry rows: one Input per line, each with a quiet remove seal, and an add row at the tail. The list is controlled — every edit emits a fresh array and the parent's array stays the only truth. Deleting never drops below `min`, adding never grows past `max`, and the group always keeps one row: an entry list that emptied itself would leave the reader no place to type. ## Basic usage :component-demo{name="dynamic-input/basic"}:component-demo{name="dynamic-input/min-max"}## Props ### DynamicInput A column of entry rows: one Input per line, each with a quiet remove seal, and an add row at the tail. The list is controlled — every edit emits a fresh array and the parent's array stays the only truth. Deleting never drops below `min`, adding never grows past `max`, and the group always keeps one row: an entry list that emptied itself would leave the reader no place to type.
Prop Type Default Description
modelValue Array as PropType () => [""] The rows' values; the group renders one Input per entry.
min Number 0 The fewest rows the group keeps; the remove seals yield first.
max Number undefined The most rows the group grows to; the add control yields then.
placeholder String undefined —
addLabel String "Add entry" The add control's visible words.
disabled Boolean false —
invalid Boolean false —
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the ladder, handed to every row's field and seals.
# Editable > Editable, dressed in the paper-and-ink system: bare ink while reading, the full field recipe while editing. The parts — Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger, CancelTrigger, Control. Preview renders the machine's value as text (the asChild escape hatch stays with the Ark primitives). ## Basic usage :component-demo{name="editable/basic"}## Props ### Area A styled part — no props of its own; it takes the anatomy's shared styling. ### CancelTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### EditTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Preview A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the editing field.
activationMode editable.ActivationMode "focus" The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked
autoResize boolean Whether the editable should auto-resize to fit the content.
defaultEdit boolean Whether the editable is in edit mode by default.
defaultValue string The initial value of the editable when rendered. Use when you don't need to control the value of the editable.
disabled boolean Whether the editable is disabled.
edit boolean Whether the editable is in edit mode.
finalFocusEl () => HTMLElement | null The element to receive focus when the editable is closed.
form string The associate form of the underlying input.
id string The unique identifier of the machine.
ids Partial<{ root: string; area: string; label: string; preview: string; input: string; control: string; submitTrigger: string; cancelTrigger: string; editTrigger: string; }> The ids of the elements in the editable. Useful for composition.
invalid boolean Whether the input's value is invalid.
maxLength number The maximum number of characters allowed in the editable
modelValue string The v-model value of the editable
name string The name attribute of the editable component. Used for form submission.
placeholder string | { edit: string; preview: string; } The placeholder text for the editable.
readOnly boolean Whether the editable is read-only.
required boolean Whether the editable is required.
selectOnFocus boolean true Whether to select the text in the input when it is focused.
submitMode editable.SubmitMode "both" The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing Enter and blurring the input will trigger submit
translations editable.IntlTranslations The translations for the editable.
### SubmitTrigger A styled part — no props of its own; it takes the anatomy's shared styling. # Ellipsis > The overflow knife: text cut at one line, or held to N lines. The primitive only draws the cut — reaching the full text (title, tooltip) stays the consumer's decision. ## Basic usage :component-demo{name="ellipsis/basic"}:component-demo{name="ellipsis/lines"}## Props ### Ellipsis
Prop Type Default Description
lines Number 1 —
# Empty > An empty state: the page holds its breath. Root centers the column, Visual carries the mark, Title and Description carry the ink, Actions the way out. Any subset composes. ## Basic usage :component-demo{name="empty/basic"}## Props ### EmptyRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### EmptyVisual A styled part — no props of its own; it takes the anatomy's shared styling. ### EmptyTitle A styled part — no props of its own; it takes the anatomy's shared styling. ### EmptyDescription A styled part — no props of its own; it takes the anatomy's shared styling. ### EmptyActions A styled part — no props of its own; it takes the anatomy's shared styling. # Field > Field, dressed in the paper-and-ink system: a tracked label, a border-and-halo control, and quiet help text. The parts — Root, Label, Input, Textarea, Select, HelperText, ErrorText, RequiredIndicator. ## Basic usage :component-demo{name="field/basic"}## Props ### ErrorText A styled part — no props of its own; it takes the anatomy's shared styling. ### HelperText A styled part — no props of its own; it takes the anatomy's shared styling. ### Input
Prop Type Default Description
modelValue InputHTMLAttributes['value'] —
### Item
Prop Type Default Description
value string —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### RequiredIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
disabled boolean Indicates whether the field is disabled.
id string The id of the field.
ids ElementIds The ids of the field parts.
invalid boolean Indicates whether the field is invalid.
readOnly boolean Indicates whether the field is read-only.
required boolean Indicates whether the field is required.
target string The target field item value the label should point to.
### Select
Prop Type Default Description
modelValue SelectHTMLAttributes['value'] —
### Textarea
Prop Type Default Description
autoresize boolean false Whether the textarea should autoresize
modelValue TextareaHTMLAttributes['value'] —
# Fieldset > Fieldset, dressed in the paper-and-ink system: a song-serif legend heading a column of fields. The parts — Root, Legend, HelperText, ErrorText. ## Basic usage :component-demo{name="fieldset/basic"}## Props ### ErrorText A styled part — no props of its own; it takes the anatomy's shared styling. ### HelperText A styled part — no props of its own; it takes the anatomy's shared styling. ### Legend A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
disabled boolean | 'true' | 'false' Indicates whether the fieldset is disabled.
id string The id of the fieldset.
invalid boolean Indicates whether the fieldset is invalid.
# File Upload > FileUpload, dressed in the paper-and-ink system: a dashed dropzone that floods with subtle light on drag-over, and accepted files as loose hairline slips. The parts — Root, Label, Trigger, Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText, ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger, Context. ## Basic usage :component-demo{name="file-upload/basic"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Dropzone
Prop Type Default Description
disableClick boolean | undefined Whether to disable the click event on the dropzone
### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemDeleteTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroup
Prop Type Default Description
type ItemType | undefined —
### ItemName A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemPreviewImage A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemPreview
Prop Type Default Description
type string '.*' The file type to match against. Matches all file types by default.
### ItemSizeText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
file File —
type ItemType | undefined —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the trigger.
accept Record | fileUpload.FileMimeType | fileUpload.FileMimeType[] The accept file types
acceptedFiles File[] The controlled accepted files
allowDrop boolean true Whether to allow drag and drop in the dropzone element
capture 'user' | 'environment' The default camera to use when capturing media
defaultAcceptedFiles File[] The default accepted files
directory boolean Whether to accept directories, only works in webkit browsers
disabled boolean Whether the file input is disabled
id string The unique identifier of the machine.
ids Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item(id: string): string; itemName(id: string): string; itemSizeText(id: string): string; itemPreview(id: string): string; }> The ids of the elements. Useful for composition.
invalid boolean Whether the file input is invalid
locale string "en-US" The current locale. Based on the BCP 47 definition.
maxFiles number 1 The maximum number of files
maxFileSize number Infinity The maximum file size in bytes
minFileSize number 0 The minimum file size in bytes
name string The name of the underlying file input
preventDocumentDrop boolean true Whether to prevent the drop event on the document
readOnly boolean Whether the file input is read-only
required boolean Whether the file input is required
transformFiles (files: File[]) => Promise Function to transform the files
translations fileUpload.IntlTranslations The localized messages to use.
validate (file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] | null Function to validate a file
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. # Float Button > The group's openness, shared from the mooring to its parts. ## Basic usage :component-demo{name="float-button/basic"}:component-demo{name="float-button/controlled-open"}## Props ### FloatButtonRoot A floating action and its fanned-out alternatives — FAB and speed dial in one family. The Root moors the group at a page corner and holds the openness (mirrored from `open` when controlled); the Trigger flips it; each Item is a round action with its name surfacing beside it while the group is open. The buttons are the shared recipe (vessels here: round); this family owns only the mooring, the fan and the fold.
Prop Type Default Description
open Boolean undefined Controlled openness: leave unset to let the group hold its own state; while set, the Trigger reports back through update:open .
placement String as PropType "bottom-end" Which corner the group moors at.
size String as PropType "lg" One rung of the button ladder for the whole group.
### FloatButtonTrigger
Prop Type Default Description
label String undefined The accessible name; the control is icon-only.
### FloatButtonItem
Prop Type Default Description
label String The action's name: the button's accessible name and the annotation surfaced beside it while the group is open.
disabled Boolean false —
# Floating Panel > FloatingPanel, dressed in the paper-and-ink system: the shared popup vessel let loose — a draggable, resizable sheet whose header is the handle. The parts — Root, Trigger, Positioner, Content, Header, Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger, Body. ## Basic usage :component-demo{name="floating-panel/basic"}## Props ### Body A styled part — no props of its own; it takes the anatomy's shared styling. ### CloseTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### DragTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Header A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### ResizeTrigger
Prop Type Default Description
axis ResizeTriggerAxis The axis of the resize handle
### Root
Prop Type Default Description
allowOverflow boolean true Whether the panel should be strictly contained within the boundary when dragging
closeOnEscape boolean Whether the panel should close when the escape key is pressed
defaultOpen boolean false The initial open state of the panel when rendered. Use when you don't need to control the open state of the panel.
defaultPosition Point The initial position of the panel when rendered. Use when you don't need to control the position of the panel.
defaultSize Size The default size of the panel
dir 'ltr' | 'rtl' "ltr" The document's text/writing direction.
disabled boolean Whether the panel is disabled
draggable boolean true Whether the panel is draggable
finalFocusEl () => HTMLElement | null The element to receive focus when the panel closes
getAnchorPosition (details: floatingPanel.AnchorPositionDetails) => Point Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.
getBoundaryEl () => HTMLElement | null The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.
gridSize number 1 The snap grid for the panel
id string The unique identifier of the machine.
ids Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> The ids of the elements in the floating panel. Useful for composition.
initialFocusEl () => HTMLElement | null The element to receive focus when the panel opens
lockAspectRatio boolean Whether the panel is locked to its aspect ratio
maxSize Size The maximum size of the panel
minSize Size The minimum size of the panel
open boolean The controlled open state of the panel
persistRect boolean Whether the panel size and position should be preserved when it is closed
position Point The controlled position of the panel
resizable boolean true Whether the panel is resizable
restoreFocus boolean true Whether to restore focus to the trigger element when the panel closes
size Size The size of the panel
strategy 'absolute' | 'fixed' "absolute" The strategy to use for positioning
translations floatingPanel.IntlTranslations The translations for the floating panel.
### StageTrigger
Prop Type Default Description
stage Stage The stage of the panel
### Title A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. # Focus Trap > Trap focus within a subtree — for containers that live outside the dialog machine but still owe the keyboard a boundary. Headless, like the rest of Ark's utilities. ## Basic usage :component-demo{name="focus-trap/basic"} # Form > The form element itself: native submit interception handing the event to the engine, one grid, one spacing voice. ## Basic usage :component-demo{name="form/basic"}:component-demo{name="form/custom-validation"}:component-demo{name="form/inputs"}## Props ### Form The form element itself: native submit interception handing the event to the engine, one grid, one spacing voice.
Prop Type Default Description
form Object as PropType undefined The engine instance from useForm — values, validation and submit all live there. Optional: a form assembled without an engine (the generative vessel) degrades to layout and native semantics.
### FormField The named slot in the grid: label, control, hint — and the engine's errors for this name, shown through the same parts the standalone Field family styles. The default slot receives the engine's live field (value, handleChange, handleBlur, full state), so every capability it has is right there where the control is wired.
Prop Type Default Description
form Object as PropType undefined Overrides the enclosing Form's engine — for a field assembled on its own.
name String The engine's key for this slot's value and errors.
label String undefined The heading above the control.
hint String undefined The quiet line under the control, shown while there is no error.
required Boolean false Marks the label with the required ornament.
invalid Boolean false Forces the invalid dress, outside any engine's verdict.
disabled Boolean false Mutes the slot.
# Format > Format, dressed in the paper-and-ink system: Intl formatting for numbers, currency, bytes and relative time. The parts — Number, Byte, Time, RelativeTime. ## Basic usage :component-demo{name="format/basic"}## Props ### Byte
Prop Type Default Description
unit 'bit' | 'byte' The unit granularity to display
unitDisplay 'long' | 'short' | 'narrow' The unit display
unitSystem 'decimal' | 'binary' The unit system to use for formatting
value number The byte size to format
### Number
Prop Type Default Description
compactDisplay 'short' | 'long' | undefined —
currencyDisplay string | undefined —
currencySign string | undefined —
notation 'standard' | 'scientific' | 'engineering' | 'compact' | undefined —
signDisplay 'auto' | 'never' | 'always' | 'exceptZero' | undefined —
unit string | undefined —
unitDisplay 'short' | 'long' | 'narrow' | undefined —
value number The byte size to format
### RelativeTime
Prop Type Default Description
localeMatcher Intl.RelativeTimeFormatLocaleMatcher The locale matching algorithm to use. For information about this option, see Intl page .
numeric Intl.RelativeTimeFormatNumeric The format of output message.
style Intl.RelativeTimeFormatStyle The length of the internationalized message.
value Date The date to format
### Time
Prop Type Default Description
value string | Date The time to format
# Frame > Frame, dressed in the paper-and-ink system: a sandboxed iframe whose body renders the default slot and whose `head` slot teleports style and link elements into the frame's document — styles the child renders must travel through it. (The React wrapper takes the same content as a `head` prop; the two frameworks disagree, as Ark renders it.) The frame measures its content and grows to fit; the vessel's border and paper belong to the consumer, since an iframe carries no anatomy attributes for the core stylesheet to hook. ## Basic usage :component-demo{name="frame/basic"}## Props ### Content A styled part — no props of its own; it takes the anatomy's shared styling. # Grid > An alignment lattice: tracks of equal measure, sized by column count — or, with `minChildWidth`, as many tracks as the container fits. ## Basic usage :component-demo{name="grid/auto-fill"}:component-demo{name="grid/basic"}:component-demo{name="grid/loose"}:component-demo{name="grid/twelve-columns"}## Props ### Grid
Prop Type Default Description
columns Number 12 —
gap String "md" —
minChildWidth String undefined —
# Highlight > Highlight, dressed in the paper-and-ink system: query hits are strokes of pigment on the page — a quiet tint of the accent behind the ink, never neon. The component renders bare elements, so the document-wide mark default carries the look. The parts. ## Basic usage :component-demo{name="highlight/basic"} # Hover Card > HoverCard, dressed in the paper-and-ink system: a preview card that dissolves in over a quiet inline link, never stealing focus. The parts — Root, Trigger, Positioner, Content, Arrow, ArrowTip. ## Basic usage :component-demo{name="hover-card/basic"}## Props ### ArrowTip A styled part — no props of its own; it takes the anatomy's shared styling. ### Arrow A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
closeDelay number 300 The duration from when the mouse leaves the trigger or content until the hover card closes.
defaultOpen boolean The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card.
defaultTriggerValue string | null The initial trigger value when rendered. Use when you don't need to control the trigger value.
disabled boolean Whether the hover card is disabled
id string The unique identifier of the machine.
ids Partial<{ trigger: string; content: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
open boolean The controlled open state of the hover card
openDelay number 700 The duration from when the mouse enters the trigger until the hover card opens.
positioning hoverCard.PositioningOptions The user provided options used to position the popover content
triggerValue string | null The value of the trigger that currently open the hover card
### Trigger
Prop Type Default Description
value string The value that identifies this specific trigger
# Icon > The inkwell: a standard box that keeps any inline svg at its optical measure and in the text's own ink — the icon carries no pigment and no size of its own. Bring a glyph through `glyph` (a direct registry import), through `name` from the whitelisted registry, or bring your own; the well renders either. ## Basic usage :component-demo{name="icon/basic"}:component-demo{name="icon/in-text"}:component-demo{name="icon/sizes"}## Props ### Icon
Prop Type Default Description
size String "inherit" Size steps follow the surrounding font size; inherit is the default — one em of the text the icon sits in.
label String undefined The accessible name. Without it the icon is presentation-only and hidden from the accessibility tree.
glyph Object undefined A glyph from the registry, imported directly. Ignored when a default slot is given — an explicit glyph always wins.
name String undefined A registry name — only the whitelisted set the wrappers draw themselves. Ignored when glyph or a default slot is given.
# Image > A framed picture: while the source loads, the frame keeps the skeleton's breath; the picture dissolves in when it lands; a broken source leaves the fallback slot — or the placeholder glyph when the caller has nothing local to say. The frame's size is the consumer's to give. ## Basic usage :component-demo{name="image/basic"}:component-demo{name="image/error"}:component-demo{name="image/fits"}## Props ### Image
Prop Type Default Description
src String —
alt String "" —
fit String as PropType "cover" —
loading String as PropType "lazy" —
# Image Cropper > ImageCropper, dressed in the paper-and-ink system: a rounded vessel holding the photograph, one lit selection window framed by light hairlines. The parts — Root, Viewport, Image, Selection, Handle, Grid, Context. ## Basic usage :component-demo{name="image-cropper/basic"}## Props ### Grid
Prop Type Default Description
axis "horizontal" | "vertical" The axis of the grid lines to display
### Handle
Prop Type Default Description
position HandlePosition The position of the handle
### Image A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
aspectRatio number The aspect ratio to maintain for the crop area (width / height). For example, an aspect ratio of 16 / 9 will maintain a width to height ratio of 16:9. If not provided, the crop area can be freely resized.
cropShape 'rectangle' | 'circle' "rectangle" The shape of the crop area.
defaultFlip imageCropper.FlipState { horizontal: false, vertical: false } The initial flip state to apply to the image.
defaultRotation number 0 The initial rotation to apply to the image in degrees.
defaultZoom number 1 The initial zoom factor to apply to the image.
fixedCropArea boolean false Whether the crop area is fixed in size and position.
flip imageCropper.FlipState The controlled flip state of the image.
ids imageCropper.ElementIds The ids of the image cropper elements
initialCrop Rect The initial rectangle of the crop area. If not provided, a smart default will be computed based on viewport size and aspect ratio.
maxHeight number Infinity The maximum height of the crop area
maxWidth number Infinity The maximum width of the crop area
maxZoom number 5 The maximum zoom factor allowed.
minHeight number 40 The minimum height of the crop area
minWidth number 40 The minimum width of the crop area
minZoom number 1 The minimum zoom factor allowed.
nudgeStep number 1 The base nudge step for keyboard arrow keys (in pixels).
nudgeStepCtrl number 50 The nudge step when Ctrl/Cmd key is held (in pixels).
nudgeStepShift number 10 The nudge step when Shift key is held (in pixels).
rotation number The controlled rotation of the image in degrees (0 - 360).
translations imageCropper.IntlTranslations Specifies the localized strings that identify accessibility elements and their states.
zoom number The controlled zoom level of the image.
zoomSensitivity number 2 Controls how responsive pinch-to-zoom is.
zoomStep number 0.1 The amount of zoom applied per wheel step.
### Selection A styled part — no props of its own; it takes the anatomy's shared styling. ### Viewport A styled part — no props of its own; it takes the anatomy's shared styling. # Image Viewer > A lightbox: the picture over a dimmed page, with a small toolbar beneath it. Zoom is the reader's hand (half to three times, clamped), a quarter turn at a time rotates, Escape and the scrim close — the dialog machine carries the modal part. `open` may stay with the caller; left undefined the viewer keeps it to itself. ## Basic usage :component-demo{name="image-viewer/basic"}:component-demo{name="image-viewer/not-zoomable"}## Props ### ImageViewer
Prop Type Default Description
src String —
alt String "" —
open Boolean undefined —
zoomable Boolean true —
# Input > The bare text input: the field recipe — border, surface, focus halo — on a native control. Standing alone it styles itself from the `invalid` prop; inside a `Field.Root` it consumes the field context, picking up the label id, the described-by wiring and the invalid state for free, which is also the seam the Form validation layer will drive. Disabled rides the native attribute. ## Basic usage :component-demo{name="input/basic"}:component-demo{name="input/mask"}## Props ### Input The bare text input: the field recipe — border, surface, focus halo — on a native control. Standing alone it styles itself from the `invalid` prop; inside a `Field.Root` it consumes the field context, picking up the label id, the described-by wiring and the invalid state for free, which is also the seam the Form validation layer will drive. Disabled rides the native attribute.
Prop Type Default Description
modelValue [String, Number] as PropType undefined —
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field.
invalid Boolean false —
mask String undefined Entry mask — 9 digit, a letter, * either, anything else is literal. e.g. "999-99-9999" , "(999) 999-9999" .
# Input Group > Merged controls: attachments and the entry fused into one seal. The Root draws the single hairline and carries the group's focus halo; the Addon is a recessed cell for the reader's fixed words — a scheme, a unit, a quiet button — placed before or after the entry. Put our Input (or Textarea) inside and its own border and halo step aside in favor of the group's; the stylesheet does the merging, the wrapper adds no visuals of its own. ## Basic usage :component-demo{name="input-group/basic"}:component-demo{name="input-group/with-actions"}## Props ### InputGroupRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### InputGroupAddon A styled part — no props of its own; it takes the anatomy's shared styling. # Json Tree View > JsonTreeView, dressed in the paper-and-ink system: the tree-view recipes re-scoped, with value nodes reading as tabular data. The parts — Root, Tree, plus createJsonTreeCollection. ## Basic usage :component-demo{name="json-tree-view/basic"}## Props ### KeyNode
Prop Type Default Description
node JsonNode The node to render.
showQuotes boolean Whether to show quotes on the key.
### Node
Prop Type Default Description
indentGuide boolean —
indexPath number[] —
node JsonNode —
### Root
Prop Type Default Description
data object The data to display in the tree.
defaultExpandedDepth number The default expand level.
quotesOnKeys boolean Whether to show quotes on the keys.
### Tree A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueNode
Prop Type Default Description
node JsonNodeHastElement —
# Kbd > A keycap in miniature, riding the type it annotates. ## Basic usage :component-demo{name="kbd/basic"}## Props ### Kbd A keycap in miniature, riding the type it annotates. A styled part — no props of its own; it takes the anatomy's shared styling. # Layout > The application skeleton: Root, Header, Sider, Content, Footer — the admin arrangement dressed in the paper-and-ink surfaces. The root is a full-height grid; a declared `sider` turns the columns around to meet whichever edge the rail stands on. ## Basic usage :component-demo{name="layout/basic"}:component-demo{name="layout/controlled-collapse"}## Props ### LayoutRoot
Prop Type Default Description
sider String as PropType<"start" | "end"> undefined —
### LayoutSider
Prop Type Default Description
collapsed Boolean false —
width String "16rem" —
collapsedWidth String "3.5rem" —
resizable Boolean false —
minWidth String "12rem" —
maxWidth String "24rem" —
# Link > A link is ink in the accent's voice: quiet at rest, deepening under the hand, the halo at focus. The underline follows the prose — always, on hover, or never. ## Basic usage :component-demo{name="link/underlines"}## Props ### Link A link is ink in the accent's voice: quiet at rest, deepening under the hand, the halo at focus. The underline follows the prose — always, on hover, or never.
Prop Type Default Description
underline String as PropType<"always" | "hover" | "none"> "hover" —
# List > A ledger of rows: Root is the list, Item one row, Leading the mark before the words, Content the title and its quiet echo, Actions the way out. The bordered variant draws the hairlines; the hoverable variant gives every row the wash — and any row the caller makes clickable (role="button") answers the pointer on its own. ## Basic usage :component-demo{name="list/basic"}:component-demo{name="list/interactive"}## Props ### ListRoot
Prop Type Default Description
bordered Boolean false One hairline between rows.
hoverable Boolean false Every row answers the pointer with a wash.
### ListItem A styled part — no props of its own; it takes the anatomy's shared styling. ### ListLeading A styled part — no props of its own; it takes the anatomy's shared styling. ### ListActions A styled part — no props of its own; it takes the anatomy's shared styling. ### ListContent The row's words: the title and description ride their own named slots, the default slot follows them for anything else. A styled part — no props of its own; it takes the anatomy's shared styling. # Listbox > Listbox, dressed in the paper-and-ink system: quiet rows of ink where the checked row alone takes the flat primary fill. The parts — Root, Label, Input, Content, Empty, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel, ValueText; the collections live in the shared collection module. ## Basic usage :component-demo{name="listbox/basic"}## Props ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Empty A styled part — no props of its own; it takes the anatomy's shared styling. ### Input
Prop Type Default Description
autoHighlight boolean | undefined false Whether to automatically highlight the item when typing
keyboardPriority "caret" | "navigate" | undefined "caret" Determines how keyboard conflicts in the input are resolved. - "caret": keep native text-editing behavior - "navigate": forward supported keys to listbox navigation
### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroupLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
highlightOnHover boolean | undefined Whether to highlight the item on hover
item T The item to render
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the ladder for the row register and the filter field.
collection ListCollection The collection of items
defaultHighlightedValue string The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the listbox.
defaultValue string[] [] The initial default value of the listbox when rendered. Use when you don't need to control the value of the listbox.
deselectable boolean Whether to disallow empty selection
disabled boolean Whether the listbox is disabled
disallowSelectAll boolean Whether to disallow selecting all items when meta+a is pressed
highlightedValue string The controlled key of the highlighted item
id string The unique identifier of the machine.
ids Partial<{ root: string; content: string; label: string; item(id: string | number): string; itemGroup(id: string | number): string; itemGroupLabel(id: string | number): string; }> The ids of the elements in the listbox. Useful for composition.
loopFocus boolean false Whether to loop the keyboard navigation through the options
modelValue string[] The model value of the listbox
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the element.
scrollToIndexFn (details: listbox.ScrollToIndexDetails) => void Function to scroll to a specific index
selectionMode listbox.SelectionMode "single" How multiple selection should behave in the listbox. - single : The user can select a single item. - multiple : The user can select multiple items without using modifier keys. - extended : The user can select multiple items by using modifier keys.
selectOnHighlight boolean Whether to select the item when it is highlighted
typeahead boolean Whether to enable typeahead on the listbox
### ValueText
Prop Type Default Description
placeholder string —
# Marquee > Marquee, dressed in the paper-and-ink system: a linear ribbon of seal-cut chips that dissolves into the paper at its edges rather than cutting off. The parts — Root, Viewport, Content, Edge, Item. ## Basic usage :component-demo{name="marquee/basic"}## Props ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Edge
Prop Type Default Description
side Side The side where the edge gradient should appear.
### Item A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
autoFill boolean false Whether to automatically duplicate content to fill the container.
defaultPaused boolean false Whether the marquee is paused by default.
delay number 0 The delay before the animation starts (in seconds).
id string The unique identifier of the machine.
ids Partial<{ root: string; viewport: string; content: (index: number) => string; }> The ids of the elements in the marquee. Useful for composition.
loopCount number 0 The number of times to loop the animation (0 = infinite).
paused boolean Whether the marquee is paused.
pauseOnInteraction boolean false Whether to pause the marquee on user interaction (hover, focus).
reverse boolean false Whether to reverse the animation direction.
side marquee.Side "start" The side/direction the marquee scrolls towards.
spacing string "1rem" The spacing between marquee items.
speed number 50 The speed of the marquee animation in pixels per second.
translations marquee.IntlTranslations The localized messages to use.
### Viewport A styled part — no props of its own; it takes the anatomy's shared styling. # Masonry > A wall of uneven heights: items flow down each column before crossing to the next, so the order is column-first. A row-flow wall would need grid masonry, which browsers do not ship yet. ## Basic usage :component-demo{name="masonry/basic"}:component-demo{name="masonry/columns"}## Props ### Masonry
Prop Type Default Description
columns Number 3 —
minColumn String undefined —
gap String "md" —
# Mentions > The vessel: the candidates themselves as a floating card. The anchor is virtual — a live rectangle off the host's field — so a host keeps its own anatomy (the textarea rides where the host puts it) and the vessel still points at the right place. Shares the detection state with the host through `useMentions`. ## Basic usage :component-demo{name="mentions/basic"}:component-demo{name="mentions/custom-trigger"}:component-demo{name="mentions/with-field"}## Props ### MentionsVessel The vessel: the candidates themselves as a floating card. The anchor is virtual — a live rectangle off the host's field — so a host keeps its own anatomy (the textarea rides where the host puts it) and the vessel still points at the right place. Shares the detection state with the host through `useMentions`.
Prop Type Default Description
open Boolean false —
matches Array as PropType () => [] —
active Number 0 —
anchor Object as PropType null —
size String as PropType<"sm" | "md" | "lg"> "md" The host field's rung, so the rows keep the field's register.
### Mentions @-mentions: a plain textarea that, when the text before the caret ends with the trigger character followed by a token, offers the matching candidates in a small anchored vessel; choosing one replaces the token with `trigger + label` and hands the whole text back through `update:modelValue`. Arrows move, Enter inserts, Escape dismisses. The field is the shared `Field.Textarea` — field wiring (label ids, the invalid state, autoresize) rides on it for free — and the vessel anchors to the field as a whole (popover machinery), not to the caret coordinates; caret-precise positioning would need a second positioning system for no practical gain at typical field sizes. Composers that keep their own field anatomy (the AI prompt input) skip this shell and wire `useMentions` plus `MentionsVessel` themselves.
Prop Type Default Description
items Array as PropType () => [] —
modelValue String undefined —
trigger String "@" —
placeholder String undefined —
autoresize Boolean false —
invalid Boolean false —
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the resting field.
# Menu > Menu, dressed in the paper-and-ink system: a quiet paper vessel on elevation, hover as light on the row, checked items as the flat ink fill. The parts — Root, Trigger, ContextTrigger, Indicator, Positioner, Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel, TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen — spread copies the members as data properties so Root can be the sized wrapper and Content carries the rung while the rest stay Ark's own parts. ## Basic usage :component-demo{name="menu/basic"}## Props ### ArrowTip A styled part — no props of its own; it takes the anatomy's shared styling. ### Arrow A styled part — no props of its own; it takes the anatomy's shared styling. ### CheckboxItem A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### ContextTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroupLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
closeOnSelect boolean | undefined Whether the menu should be closed when the option is selected.
disabled boolean | undefined Whether the menu item is disabled
value string The unique value of the menu item option.
valueText string | undefined The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.
### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### RadioItemGroup
Prop Type Default Description
id string —
modelValue string —
### RadioItem A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the vessel's rows.
anchorPoint menu.Point The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-label string The accessibility label for the menu
closeOnSelect boolean true Whether to close the menu when an option is selected
composite boolean true Whether the menu is a composed with other composite widgets like a combobox or tabs
defaultHighlightedValue string The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.
defaultOpen boolean The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.
defaultTriggerValue string | null The initial trigger value when rendered. Use when you don't need to control the trigger value.
highlightedValue string The controlled highlighted value of the menu item.
id string The unique identifier of the machine.
ids Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel(id: string): string; group(id: string): string; positioner: string; arrow: string; }> The ids of the elements in the menu. Useful for composition.
loopFocus boolean false Whether to loop the keyboard navigation.
navigate (details: menu.NavigateDetails) => void Function to navigate to the selected item if it's an anchor element
open boolean The controlled open state of the menu
positioning menu.PositioningOptions The options used to dynamically position the menu
triggerValue string | null The value of the trigger that currently open the menu
typeahead boolean true Whether the pressing printable characters should trigger typeahead navigation
### Separator A styled part — no props of its own; it takes the anatomy's shared styling. ### TriggerItem A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger
Prop Type Default Description
value string The value that identifies this specific trigger
# Menubar > A desktop-style menu bar: a row of quiet ghost triggers, each opening the same paper vessel as the menu family. The triggers are our own buttons grafted onto the menu machine's trigger via `asChild` — the machine keeps the trigger element (positioning, focus restore, `data-state`) while the element wears the menubar scope. The popups keep the menu parts untouched, so the menu stylesheet dresses them. Keyboard note: the triggers move between each other with Tab, not arrow keys — cross-menu arrow traversal is out of scope for this version. Inside an open menu the machine handles arrows and Escape. ## Basic usage :component-demo{name="menubar/basic"}:component-demo{name="menubar/in-context"}## Props ### Menubar A desktop-style menu bar: a row of quiet ghost triggers, each opening the same paper vessel as the menu family. The triggers are our own buttons grafted onto the menu machine's trigger via `asChild` — the machine keeps the trigger element (positioning, focus restore, `data-state`) while the element wears the menubar scope. The popups keep the menu parts untouched, so the menu stylesheet dresses them. Keyboard note: the triggers move between each other with Tab, not arrow keys — cross-menu arrow traversal is out of scope for this version. Inside an open menu the machine handles arrows and Escape.
Prop Type Default Description
items Array as PropType () => [] —
onSelect Function as PropType<(value: string) => void> undefined —
# Meter > A measure in the world, not a task in flight: how much of the toner remains, how full the cistern stands. The level chooses the pigment — primary while all is well, the fixed semantic pigments at the thresholds. ## Basic usage :component-demo{name="meter/levels"}## Props ### MeterLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### MeterValueText A styled part — no props of its own; it takes the anatomy's shared styling. ### MeterTrack A styled part — no props of its own; it takes the anatomy's shared styling. ### MeterRoot
Prop Type Default Description
value Number The measured value — clamped between min and max.
min Number 0 —
max Number 100 —
level String as PropType<"normal" | "success" | "warning" | "danger"> "normal" The pigment the ink rides: primary unless a threshold is crossed.
label String undefined —
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the groove ladder — the track's thickness.
# Navigation Menu > NavigationMenu, dressed in the paper-and-ink system: a menubar of ghost triggers with one sliding stroke of primary ink, opening the shared popup vessel. The parts — Root, List, Item, Trigger, Link, Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. ## Basic usage :component-demo{name="navigation-menu/basic"}:component-demo{name="navigation-menu/mega"}## Props ### Arrow A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
disabled boolean | undefined Whether the item is disabled
value string The value of the item
### Link A styled part — no props of its own; it takes the anatomy's shared styling. ### List A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
closeDelay number 300 The delay before the menu closes
defaultValue string The default value of the navigation menu. Use when you don't want to control the value of the menu.
disableClickTrigger boolean Whether to disable the click trigger
disableHoverTrigger boolean Whether to disable the hover trigger
disablePointerLeaveClose boolean Whether to disable the pointer leave close
id string The unique identifier of the machine.
ids Partial<{ root: string; list: string; item: string; trigger: (value: string) => string; content: (value: string) => string; viewport: string; }> The ids of the elements in the machine.
openDelay number 200 The delay before the menu opens
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the navigation menu
translations navigationMenu.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
value string The controlled value of the navigation menu
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ViewportPositioner
Prop Type Default Description
align "start" | "center" | "end" Placement of the viewport for css variables (--viewport-x, --viewport-y) . @defaultValue 'center'
### Viewport A styled part — no props of its own; it takes the anatomy's shared styling. # Number Input > NumberInput, dressed in the paper-and-ink system: the stepper rides inside the field as one seal split by a hairline, numbers set in tabular figures. The parts — Root, Label, Control, Input, ValueText, IncrementTrigger, DecrementTrigger, Scrubber. ## Basic usage :component-demo{name="number-input/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### DecrementTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### IncrementTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field and its stepper.
allowMouseWheel boolean Whether to allow mouse wheel to change the value
allowOverflow boolean true Whether to allow the value overflow the min/max range
clampValueOnBlur boolean true Whether to clamp the value when the input loses focus (blur)
defaultValue string The initial value of the input when rendered. Use when you don't need to control the value of the input.
disabled boolean Whether the number input is disabled.
focusInputOnChange boolean true Whether to focus input when the value changes
form string The associate form of the input element.
formatOptions Intl.NumberFormatOptions The options to pass to the Intl.NumberFormat constructor
id string The unique identifier of the machine.
ids Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }> The ids of the elements in the number input. Useful for composition.
inputMode 'text' | 'tel' | 'numeric' | 'decimal' "decimal" Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices
invalid boolean Whether the number input value is invalid.
largeStep number 10 * step The amount to increment or decrement the value by when the shift key is held
locale string "en-US" The current locale. Based on the BCP 47 definition.
max number Number.MAX_SAFE_INTEGER The maximum value of the number input
min number Number.MIN_SAFE_INTEGER The minimum value of the number input
modelValue string The v-model value of the number input
name string The name attribute of the number input. Useful for form submission.
pattern string "[0-9]*(.[0-9]+)?" The pattern used to check the element's value against
readOnly boolean Whether the number input is readonly
required boolean Whether the number input is required
smallStep number step / 10 The amount to increment or decrement the value by when the alt key is held
spinOnPress boolean true Whether to spin the value when the increment/decrement button is pressed
step number 1 The amount to increment or decrement the value by
translations numberInput.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
### Scrubber A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText A styled part — no props of its own; it takes the anatomy's shared styling. # Order List > A ledger the reader may rewrite: rows move by grip or by the side arrows, and the group reports the new order as the value itself — the model is the order. Dragging rides the native drag events — a hairline of primary ink marks the seam the row will land on — so touch keeps the buttons as its route. ## Basic usage :component-demo{name="order-list/basic"}## Props ### OrderList A ledger the reader may rewrite: rows move by grip or by the side arrows, and the group reports the new order as the value itself — the model is the order. Dragging rides the native drag events — a hairline of primary ink marks the seam the row will land on — so touch keeps the buttons as its route.
Prop Type Default Description
modelValue Array as PropType The rows in their current order — the value is the order.
options Array as PropType Every row the ledger knows, in no particular order.
label String undefined —
# Page Header > The page's face: an eyebrow whisper, a serif title, one line of description, and the actions resting beside the title on the same baseline. Heading groups title and actions; the rest compose below. ## Basic usage :component-demo{name="page-header/basic"}## Props ### PageHeaderRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### PageHeaderHeading A styled part — no props of its own; it takes the anatomy's shared styling. ### PageHeaderEyebrow A styled part — no props of its own; it takes the anatomy's shared styling. ### PageHeaderTitle A styled part — no props of its own; it takes the anatomy's shared styling. ### PageHeaderDescription A styled part — no props of its own; it takes the anatomy's shared styling. ### PageHeaderActions A styled part — no props of its own; it takes the anatomy's shared styling. # Pagination > Pagination — paged navigation. Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger, FirstTrigger, LastTrigger. Items carry data-selected. ## Basic usage :component-demo{name="pagination/basic"}## Props ### Ellipsis
Prop Type Default Description
index number —
### FirstTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
type "page" —
value number —
### LastTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### NextTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### PrevTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder every page seal shares.
count number Total number of data items
defaultPage number 1 The initial active page when rendered. Use when you don't need to control the active page of the pagination.
defaultPageSize number 10 The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination.
getPageUrl (details: pagination.PageUrlDetails) => string Function to generate href attributes for pagination links. Only used when type is set to "link".
id string The unique identifier of the machine.
ids Partial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }> The ids of the elements in the accordion. Useful for composition.
page number The controlled active page
pageSize number The controlled number of data items per page
siblingCount number 1 Number of pages to show beside active page
translations pagination.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
type 'button' | 'link' "button" The type of the trigger element
# Password Input > PasswordInput, dressed in the paper-and-ink system: the reveal eye sits quiet at the field's edge and swaps in place — no shift, no noise. The parts — Root, Label, Control, Input, Indicator, VisibilityTrigger. ## Basic usage :component-demo{name="password-input/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator
Prop Type Default Description
fallback string The fallback content to display when the password is not visible.
### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the field and its eye.
autoComplete passwordInput.Props['autoComplete'] The autocomplete attribute for the input
defaultVisible boolean Whether the password is visible by default
disabled boolean Whether the input is disabled
id string The unique identifier of the machine.
ids passwordInput.Props['ids'] The ids of the elements in the password input. Useful for composition.
ignorePasswordManagers boolean Whether to ignore password managers
invalid boolean Whether the input is in an invalid state
name string The name attribute for the input
readOnly boolean Whether the input is read-only
required boolean Whether the input is required
translations passwordInput.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
visible boolean Whether the password is visible
### VisibilityTrigger A styled part — no props of its own; it takes the anatomy's shared styling. # Pin Input > PinInput, dressed in the paper-and-ink system: one character per square-cut seal, centered ink in tabular figures. The parts — Root, Label, Control, Input, HiddenInput. ## Basic usage :component-demo{name="pin-input/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Input
Prop Type Default Description
index number —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder each seal stands on.
autoFocus boolean Whether to auto-focus the first input.
autoSubmit boolean Whether to auto-submit the owning form when all inputs are filled.
blurOnComplete boolean Whether to blur the input when the value is complete
count number The number of inputs to render to improve SSR aria attributes. This will be required in next major version.
defaultValue string[] The initial value of the the pin input when rendered. Use when you don't need to control the value of the pin input.
disabled boolean Whether the inputs are disabled
form string The associate form of the underlying input element.
id string The unique identifier of the machine.
ids Partial<{ root: string; hiddenInput: string; label: string; control: string; input(id: string): string; }> The ids of the elements in the pin input. Useful for composition.
invalid boolean Whether the pin input is in the invalid state
mask boolean If true , the input's value will be masked just like type=password
modelValue string[] The v-model value of the pin input
name string The name of the input element. Useful for form submission.
otp boolean If true , the pin input component signals to its fields that they should use autocomplete="one-time-code" .
pattern string The regular expression that the user-entered input value is checked against.
placeholder string "○" The placeholder text for the input
readOnly boolean Whether the pin input is in the valid state
required boolean Whether the pin input is required
sanitizeValue (value: string) => string Function to sanitize pasted values before validation. Useful for stripping dashes, spaces, or other formatting.
selectOnFocus boolean Whether to select input value when input is focused
translations pinInput.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
type 'alphanumeric' | 'numeric' | 'alphabetic' "numeric" The type of value the pin-input should allow
# Popconfirm > A question at the point of no return: the trigger opens a small anchored vessel carrying the message and two answers. Confirmation and cancellation are the caller's to act on — the panel closes either way. The default slot is the trigger; give it a single element (wrap a group in a span otherwise). ## Basic usage :component-demo{name="popconfirm/basic"}## Props ### Popconfirm A question at the point of no return: the trigger opens a small anchored vessel carrying the message and two answers. Confirmation and cancellation are the caller's to act on — the panel closes either way. The default slot is the trigger; give it a single element (wrap a group in a span otherwise).
Prop Type Default Description
message String The question the reader is answering.
confirmText String "Confirm" —
cancelText String "Cancel" —
# Popover > Popover, dressed in the paper-and-ink system: a paper vessel that dissolves in on elevation, anchored to its trigger by a whisker arrow. The parts — Root, Trigger, Anchor, Indicator, Positioner, Content, Title, Description, CloseTrigger, Arrow, ArrowTip. ## Basic usage :component-demo{name="popover/basic"}## Props ### Anchor A styled part — no props of its own; it takes the anatomy's shared styling. ### ArrowTip A styled part — no props of its own; it takes the anatomy's shared styling. ### Arrow A styled part — no props of its own; it takes the anatomy's shared styling. ### CloseTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Description A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
autoFocus boolean true Whether to automatically set focus on the first focusable content within the popover when opened.
closeOnEscape boolean true Whether to close the popover when the escape key is pressed.
closeOnInteractOutside boolean true Whether to close the popover when the user clicks outside of the popover.
defaultOpen boolean The initial open state of the popover when rendered. Use when you don't need to control the open state of the popover.
defaultTriggerValue string | null The initial trigger value when rendered. Use when you don't need to control the trigger value.
finalFocusEl () => HTMLElement | null Element to receive focus when the popover is closed
id string The unique identifier of the machine.
ids Partial<{ anchor: string; trigger: string; content: string; title: string; description: string; closeTrigger: string; positioner: string; arrow: string; }> The ids of the elements in the popover. Useful for composition.
initialFocusEl () => HTMLElement | null The element to focus on when the popover is opened.
modal boolean false Whether the popover should be modal. When set to true : - interaction with outside elements will be disabled - only popover content will be visible to screen readers - scrolling is blocked - focus is trapped within the popover
open boolean The controlled open state of the popover
persistentElements (() => Element | null)[] Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
portalled boolean true Whether the popover is portalled. This will proxy the tabbing behavior regardless of the DOM position of the popover content.
positioning popover.PositioningOptions The user provided options used to position the popover content
restoreFocus boolean true Whether to restore focus to the element that had focus before the popover was opened
translations popover.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
triggerValue string | null The value of the trigger that currently open the popover
### Title A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger
Prop Type Default Description
value string | undefined The value that identifies this specific trigger
# Presence > Mount/unmount children in step with CSS presence animations — the engine behind Ark's "postpone unmounting so exit animations finish" contract, exposed for composites of our own. ## Basic usage :component-demo{name="presence/basic"} # Progress > Progress, dressed in the paper-and-ink system: a quiet hairline groove that the primary ink fills at the machine's pace. The parts — Root, Label, ValueText, Track, Range, View, Circle, CircleTrack, CircleRange. ## Basic usage :component-demo{name="progress/basic"}## Props ### CircleRange A styled part — no props of its own; it takes the anatomy's shared styling. ### CircleTrack A styled part — no props of its own; it takes the anatomy's shared styling. ### Circle A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Range A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the groove ladder — the track's thickness.
defaultValue number | null 50 The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
formatOptions Intl.NumberFormatOptions { style: "percent" } The options to use for formatting the value.
id string The unique identifier of the machine.
ids Partial<{ root: string; track: string; label: string; circle: string; }> The ids of the elements in the progress bar. Useful for composition.
locale string "en-US" The locale to use for formatting the value.
max number 100 The maximum allowed value of the progress bar.
min number 0 The minimum allowed value of the progress bar.
modelValue number | null The v-model value of the progress
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the element.
translations progress.IntlTranslations The localized messages to use.
### Track A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText A styled part — no props of its own; it takes the anatomy's shared styling. ### View
Prop Type Default Description
state ProgressState —
# Progress Group > One verdict on the bar. ## Basic usage :component-demo{name="progress-group/bar-only"}:component-demo{name="progress-group/basic"}:component-demo{name="progress-group/partial-whole"}## Props ### ProgressGroup
Prop Type Default Description
segments Array as PropType —
max Number undefined —
showLegend Boolean true —
# QR Code > QrCode, dressed in the paper-and-ink system: the pattern prints in ink on the page, with an optional paper badge and a seal-cut download control. The parts — Root, Frame, Pattern, Overlay, DownloadTrigger. ## Basic usage :component-demo{name="qr-code/basic"}## Props ### DownloadTrigger
Prop Type Default Description
fileName string The name of the file.
mimeType DataUrlType The mime type of the image.
quality number | undefined The quality of the image.
### Frame A styled part — no props of its own; it takes the anatomy's shared styling. ### Overlay A styled part — no props of its own; it takes the anatomy's shared styling. ### Pattern A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
defaultValue string The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
encoding qrcode.QrCodeGenerateOptions The qr code encoding options.
id string The unique identifier of the machine.
ids Partial<{ root: string; frame: string; }> The element ids.
modelValue string The v-model value of the qr code
pixelSize number The pixel size of the qr code.
# Radio Group > RadioGroup, dressed in the paper-and-ink system: a column of full-circle seals that fill flat with primary ink when chosen, the dot punched through as paper. The parts — Root, Label, Item, ItemText, ItemControl, Indicator, ItemHiddenInput. ## Basic usage :component-demo{name="radio-group/basic"}## Props ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemControl A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemHiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
disabled boolean | undefined —
invalid boolean | undefined —
value string —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung for the dial; the chosen dot rides it.
defaultValue string | null The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
disabled boolean If true , the radio group will be disabled
form string The associate form of the underlying input.
id string The unique identifier of the machine.
ids Partial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }> The ids of the elements in the radio. Useful for composition.
invalid boolean Whether the radio group is invalid
modelValue string | null The v-model value of the radio group
name string The name of the input fields in the radio (Useful for form submission).
orientation 'horizontal' | 'vertical' Orientation of the radio group
readOnly boolean Whether the checkbox is read-only
required boolean Whether the radio group is required
# Rating Group > RatingGroup, dressed in the paper-and-ink system: a row of quiet seals whose glyphs take the primary pigment as they light up. The parts — Root, Label, Control, Item, HiddenInput (plus the Context and ItemContext render helpers). ## Basic usage :component-demo{name="rating-group/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
index number —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder every seal stands on.
allowHalf boolean Whether to allow half stars.
autoFocus boolean Whether to autofocus the rating.
count number 5 The total number of ratings.
defaultValue number The initial value of the rating when rendered. Use when you don't need to control the value of the rating.
disabled boolean Whether the rating is disabled.
form string The associate form of the underlying input element.
id string The unique identifier of the machine.
ids Partial<{ root: string; label: string; hiddenInput: string; control: string; item(id: string): string; }> The ids of the elements in the rating. Useful for composition.
modelValue number The v-model value of the rating group
name string The name attribute of the rating element (used in forms).
readOnly boolean Whether the rating is readonly.
required boolean Whether the rating is required.
translations ratingGroup.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
# Result > A verdict drawn after the deed: the mark washes in the fixed pigment, the title rides the serif, and the extra carries the way onward. Any subset composes. ## Basic usage :component-demo{name="result/basic"}## Props ### SResultRoot
Prop Type Default Description
status String as PropType "info" The verdict the operation returned; the fixed pigments speak it.
### SResultIcon The mark carries all four verdicts and lets the root choose, so the icon can never drift from the status the root declares. A styled part — no props of its own; it takes the anatomy's shared styling. ### ResultTitle A styled part — no props of its own; it takes the anatomy's shared styling. ### ResultDescription A styled part — no props of its own; it takes the anatomy's shared styling. ### ResultExtra A styled part — no props of its own; it takes the anatomy's shared styling. # Scroll Area > ScrollArea, dressed in the paper-and-ink system: native bars give way to quiet ink lanes that surface on hover and scroll. The parts — Root, Viewport, Content, Scrollbar, Thumb, Corner. ## Basic usage :component-demo{name="scroll-area/basic"}## Props ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Corner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
id string The unique identifier of the machine.
ids Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string; }> The ids of the scroll area elements
### Scrollbar
Prop Type Default Description
orientation Orientation —
### Thumb A styled part — no props of its own; it takes the anatomy's shared styling. ### Viewport A styled part — no props of its own; it takes the anatomy's shared styling. # Segment Group > SegmentGroup, dressed in the paper-and-ink system: a hairline tray where one flat ink plate travels beneath the checked seal. The parts — Root, Label, Indicator, Item, ItemText, ItemControl, ItemHiddenInput. ## Basic usage :component-demo{name="segment-group/basic"}## Props ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemControl A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemHiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
disabled boolean | undefined —
invalid boolean | undefined —
value string —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the segments. The family keeps its compact register, so the rungs sit one notch below the global ladder — the default md rests at the small height.
orientation String as PropType<"horizontal" | "vertical"> "horizontal" The tray reads as one row of seals; the underlying machine defaults to a vertical stack, so the horizontal row is ours to assert.
defaultValue string The initial value of the segment group when it is first rendered. Use when you do not need to control the state of the segment group.
disabled boolean If true , the segment group will be disabled
form string The associate form of the underlying input.
id string The unique identifier of the machine.
ids Partial<{ root: string; label: string; indicator: string; item(value: string): string; itemLabel(value: string): string; itemControl(value: string): string; itemHiddenInput(value: string): string; }> The ids of the elements in the radio. Useful for composition.
modelValue string | null The v-model value of the segment group
name string The name of the input fields in the radio (Useful for form submission).
readOnly boolean Whether the segment group is read-only
# Select > Select, dressed in the paper-and-ink system: the trigger is the whole control and its list dissolves open as a paper vessel, the checked row taking the flat ink fill. The parts — Root, Label, Control, Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner, Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. ## Basic usage :component-demo{name="select/basic"}:component-demo{name="select/native"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Content A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenSelect A styled part — no props of its own; it takes the anatomy's shared styling. ### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroupLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
item T The item to render
persistFocus boolean | undefined Whether hovering outside should clear the highlighted state
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### List A styled part — no props of its own; it takes the anatomy's shared styling. ### Positioner A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the trigger.
autoComplete string The autocomplete attribute for the hidden select. Enables browser autofill (e.g. "address-level1" for state).
closeOnSelect boolean true Whether the select should close after an item is selected
collection ListCollection The collection of items
composite boolean true Whether the select is a composed with other composite widgets like tabs or combobox
defaultHighlightedValue string The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.
defaultOpen boolean Whether the select's open state is controlled by the user
defaultValue string[] The initial default value of the select when rendered. Use when you don't need to control the value of the select.
deselectable boolean Whether the value can be cleared by clicking the selected item. Note: this is only applicable for single selection
disabled boolean Whether the select is disabled
form string The associate form of the underlying select.
highlightedValue string The controlled key of the highlighted item
id string The unique identifier of the machine.
ids Partial<{ root: string; content: string; control: string; trigger: string; clearTrigger: string; label: string; hiddenSelect: string; positioner: string; item(id: string | number): string; itemGroup(id: string | number): string; itemGroupLabel(id: string | number): string; }> The ids of the elements in the select. Useful for composition.
invalid boolean Whether the select is invalid
loopFocus boolean false Whether to loop the keyboard navigation through the options
modelValue string[] The model value of the select
multiple boolean Whether to allow multiple selection
name string The name attribute of the underlying select.
open boolean Whether the select menu is open
positioning select.PositioningOptions The positioning options of the menu.
readOnly boolean Whether the select is read-only
required boolean Whether the select is required
scrollToIndexFn (details: select.ScrollToIndexDetails) => void Function to scroll to a specific index
translations select.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText
Prop Type Default Description
placeholder string —
# Separator > The paper-ink hairline as a component: a named rule between sections. Decorative separators drop the separator role, since the page reads fine without them. ## Basic usage :component-demo{name="separator/basic"}## Props ### Separator
Prop Type Default Description
orientation String "horizontal" —
decorative Boolean false —
# Signature Pad > SignaturePad, dressed in the paper-and-ink system: a quiet paper field with a guide hairline where ink — real ink strokes — is laid down. The parts — Root, Label, Control, Segment, SegmentPath, Guide, ClearTrigger, HiddenInput, Context. ## Basic usage :component-demo{name="signature-pad/basic"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### Guide A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput
Prop Type Default Description
value string —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
defaultPaths string[] The default paths of the signature pad.
disabled boolean Whether the signature pad is disabled.
drawing signaturePad.DrawingOptions '{ size: 2, simulatePressure: true }' The drawing options.
id string The unique identifier of the machine.
ids Partial<{ root: string; control: string; hiddenInput: string; label: string; }> The ids of the signature pad elements. Useful for composition.
name string The name of the signature pad. Useful for form submission.
paths string[] The controlled paths of the signature pad.
readOnly boolean Whether the signature pad is read-only.
required boolean Whether the signature pad is required.
translations signaturePad.IntlTranslations The translations of the signature pad. Useful for internationalization.
### Segment A styled part — no props of its own; it takes the anatomy's shared styling. # Skeleton > A waiting sheet of unset paper. Size it from the outside; the breath is the component's own. ## Basic usage :component-demo{name="skeleton/basic"}## Props ### Skeleton A waiting sheet of unset paper. Size it from the outside; the breath is the component's own. A styled part — no props of its own; it takes the anatomy's shared styling. # Slider > Slider, dressed in the paper-and-ink system: a recessed track the primary ink runs along, a paper-seal thumb, and hairline tick markers. The parts — Root, Label, ValueText, Control, Track, Range, Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. ## Basic usage :component-demo{name="slider/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### DraggingIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### MarkerGroup A styled part — no props of its own; it takes the anatomy's shared styling. ### Marker
Prop Type Default Description
value number —
### Range A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the part-size ladder for the thumb seal.
aria-label string[] The aria-label of each slider thumb. Useful for providing an accessible name to the slider
aria-labelledby string[] The id of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
defaultValue number[] The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
dir 'ltr' | 'rtl' "ltr" The document's text/writing direction.
disabled boolean Whether the slider is disabled
form string The associate form of the underlying input element.
getAriaValueText (details: slider.ValueTextDetails) => string Function that returns a human readable value for the slider thumb
getRootNode () => ShadowRoot | Document | Node A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
id string The unique identifier of the machine.
ids Partial<{ root: string; thumb(index: number): string; hiddenInput(index: number): string; control: string; track: string; range: string; label: string; valueText: string; marker(index: number): string; }> The ids of the elements in the slider. Useful for composition.
invalid boolean Whether the slider is invalid
largeStep number 10 * step The amount to increment or decrement the value by when the shift key is held, or the page up/down keys are pressed
max number 100 The maximum value of the slider
min number 0 The minimum value of the slider
minStepsBetweenThumbs number 0 The minimum permitted steps between multiple thumbs.
modelValue number[] The v-model value of the slider
name string The name associated with each slider thumb (when used in a form)
orientation 'vertical' | 'horizontal' "horizontal" The orientation of the slider
origin 'start' | 'center' "start" The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
readOnly boolean Whether the slider is read-only
step number 1 The step value of the slider
thumbAlignment 'center' | 'contain' "contain" The alignment of the slider thumb relative to the track - center : the thumb will extend beyond the bounds of the slider track. - contain : the thumb will be contained within the bounds of the track.
thumbCollisionBehavior 'none' | 'push' | 'swap' "none" How thumbs behave when they collide during pointer interactions - none : Thumbs cannot move past each other - push : Thumbs push each other - swap : Thumbs swap places
thumbSize { width: number; height: number; } The slider thumbs dimensions
### Thumb
Prop Type Default Description
index number —
name string | undefined —
### Track A styled part — no props of its own; it takes the anatomy's shared styling. ### ValueText A styled part — no props of its own; it takes the anatomy's shared styling. # Spinner > A wheel of waiting: one arc of ink turning about its center. Quiet by default — it reports progress without claiming attention. ## Basic usage :component-demo{name="spinner/sizes"}## Props ### Spinner A wheel of waiting: one arc of ink turning about its center. Quiet by default — it reports progress without claiming attention.
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control ladder for the wheel's diameter.
# Split Button > A primary action with its alternatives one seam away: the main button fires `click`, the fitted arrow opens a paper vessel of the same register whose entries emit `select` with their value. The arrow is the menu machine's trigger grafting our button via `asChild` — the machine keeps the element (positioning, focus, `data-state`), the button recipe dresses it. The popup keeps the menu parts untouched. ## Basic usage :component-demo{name="split-button/basic"}:component-demo{name="split-button/outline"}## Props ### SplitButton A primary action with its alternatives one seam away: the main button fires `click`, the fitted arrow opens a paper vessel of the same register whose entries emit `select` with their value. The arrow is the menu machine's trigger grafting our button via `asChild` — the machine keeps the element (positioning, focus, `data-state`), the button recipe dresses it. The popup keeps the menu parts untouched.
Prop Type Default Description
label String The main action's label.
items Array as PropType () => [] The dropdown's entries.
variant String "solid" How both halves rest; the arrow always reads as one control with the main button.
tone String "ink" The pigment the halves are inked with; ink is the solemn default, and the fixed pigments speak for their meaning.
size String "md" One rung of the control-height ladder for both halves.
disabled Boolean false —
# Splitter > Splitter, dressed in the paper-and-ink system: panels divide on a hairline and a small paper-seal thumb answers the hand. The parts — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. ## Basic usage :component-demo{name="splitter/basic"}## Props ### Panel
Prop Type Default Description
id PanelId —
### ResizeTriggerIndicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ResizeTrigger
Prop Type Default Description
disabled boolean | undefined —
id ResizeTriggerId —
### Root
Prop Type Default Description
defaultSize number[] The initial size of the panels when rendered. Use when you don't need to control the size of the panels.
id string The unique identifier of the machine.
ids Partial<{ root: string; resizeTrigger(id: string): string; label(id: string): string; panel(id: string | number): string; }> The ids of the elements in the splitter. Useful for composition.
keyboardResizeBy number The number of pixels to resize the panel by when the keyboard is used.
nonce string The nonce for the injected splitter cursor stylesheet.
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the splitter. Can be horizontal or vertical
panels splitter.PanelData[] The size constraints of the panels.
registry splitter.SplitterRegistry The splitter registry to use for multi-drag support.
size number[] The controlled size data of the panels
# Spotlight > The ink-light card: a vessel whose rim and face take light from the reader's hand. The wrapper only measures and writes the geometry — the lamp itself is the two layers the stylesheet paints. ## Basic usage :component-demo{name="spotlight/basic"}## Props ### SSpotlight The ink-light card: a vessel whose rim and face take light from the reader's hand. The wrapper only measures and writes the geometry — the lamp itself is the two layers the stylesheet paints.
Prop Type Default Description
radius String undefined —
# Stack > Whitespace chosen by name: the named steps point at the space ramp so siblings are held apart by one token, never by ad-hoc margins. ## Basic usage :component-demo{name="stack/basic"}:component-demo{name="stack/gap-steps"}:component-demo{name="stack/row"}:component-demo{name="stack/wrap"}## Props ### Stack Whitespace chosen by name: the named steps point at the space ramp so siblings are held apart by one token, never by ad-hoc margins.
Prop Type Default Description
direction String "column" —
gap String "md" —
wrap Boolean false —
align String undefined —
justify String undefined —
# Stat > One figure on the page: the label whispers what it is, the value states it plainly in tabular figures, the delta reads the direction in the fixed semantic pigments. ## Basic usage :component-demo{name="stat/row"}## Props ### StatRoot A styled part — no props of its own; it takes the anatomy's shared styling. ### StatLabel A styled part — no props of its own; it takes the anatomy's shared styling. ### StatValue A styled part — no props of its own; it takes the anatomy's shared styling. ### StatDescription A styled part — no props of its own; it takes the anatomy's shared styling. ### StatDelta The delta reads its direction from the `direction` prop (an explicit `data-direction` attribute on the consumer side still wins).
Prop Type Default Description
direction String as PropType<"up" | "down" | "flat"> "flat" —
# Steps > Steps — linear progress through a sequence. Parts: Root, List, Item, Trigger, Indicator, Separator, Content, PrevTrigger, NextTrigger, Progress. Indicator and Separator carry data-complete / data-current / data-incomplete. ## Basic usage :component-demo{name="steps/basic"}:component-demo{name="steps/vertical"}## Props ### CompletedContent A styled part — no props of its own; it takes the anatomy's shared styling. ### Content
Prop Type Default Description
index number —
### Indicator A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
index number —
### List A styled part — no props of its own; it takes the anatomy's shared styling. ### NextTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### PrevTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Progress A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder every indicator stands on.
count number The total number of steps
defaultStep number The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
id string The unique identifier of the machine.
ids steps.ElementIds The custom ids for the stepper elements
isStepSkippable (index: number) => boolean Function that returns whether a step can be skipped
isStepValid (index: number) => boolean Function that returns whether a step is valid
linear boolean If true , the stepper requires the user to complete the steps in order
orientation 'horizontal' | 'vertical' "horizontal" The orientation of the stepper
step number The controlled value of the stepper
### Separator A styled part — no props of its own; it takes the anatomy's shared styling. ### Trigger A styled part — no props of its own; it takes the anatomy's shared styling. # Swap > Swap, dressed in the paper-and-ink system: two impressions occupying one seal, the arriving one growing into place on the spring while the departing one shrinks away. The parts — Root, Indicator (type="on" | "off"), RootProvider. ## Basic usage :component-demo{name="swap/basic"}## Props ### Indicator
Prop Type Default Description
type 'on' | 'off' —
### Root
Prop Type Default Description
lazyMount boolean Whether to enable lazy mounting.
swap boolean Whether the swap is in the "on" state.
unmountOnExit boolean Whether to unmount on exit.
# Switch > Switch, dressed in the paper-and-ink system: a track that rests in the inset shade of the paper and fills flat with primary ink when on, the thumb sliding on the spring. The parts — Root, Label, Control, Thumb, HiddenInput. ## Basic usage :component-demo{name="switch/basic"}## Props ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung for the thumb; the track travels with it.
checked boolean The controlled checked state of the switch
defaultChecked boolean The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.
disabled boolean Whether the switch is disabled.
form string The id of the form that the switch belongs to
id string The unique identifier of the machine.
ids Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> The ids of the elements in the switch. Useful for composition.
invalid boolean If true , the switch is marked as invalid.
label string Specifies the localized strings that identifies the accessibility elements and their states
name string The name of the input field in a switch (Useful for form submission).
readOnly boolean Whether the switch is read-only
required boolean If true , the switch input is marked as required,
value string "on" The value of checkbox input. Useful for form submission.
### Thumb A styled part — no props of its own; it takes the anatomy's shared styling. # Table > One-stop data table on TanStack Table v9, dressed in the paper-and-ink system: rows are CSS grids under ARIA table semantics, so sticky headers, pinned columns, merged cells, and a virtualized window all stay honest while sorting, filtering, tree expansion, selection, and pagination come from the row-model pipeline. ## Basic usage :component-demo{name="table/basic"}## Props ### SDataTable
Prop Type Default Description
data Array as PropType —
columns Array as PropType[]> —
selectable unknown —
sortable Boolean true —
filterable unknown —
showToolbar Boolean true —
tree unknown —
merge Array as PropType —
pinStart Array as PropType —
pinEnd Array as PropType —
virtual unknown —
rowHeight Number 40 —
paginated unknown —
pageSize Number 10 —
pageSizeOptions Array as PropType () => [10, 20, 50] —
stickyFooter unknown —
initialSorting Array as PropType —
globalFilterPlaceholder String "Filter rows" —
emptyText String "No rows" —
reorderable unknown —
# Tabs > Tabs — tabbed navigation. Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink bar on the list rule). ## Basic usage :component-demo{name="tabs/basic"}:component-demo{name="tabs/card"}## Props ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the tab rows.
variant String as PropType<"line" | "card"> "line" The register: a ruled strip, or each selection lifted into a card.
orientation String as PropType<"horizontal" | "vertical"> "horizontal" Which rail the rule rides: a strip across, or a rail down.
activationMode 'manual' | 'automatic' "automatic" The activation mode of the tabs. Can be manual or automatic - manual : Tabs are activated when clicked or press enter key. - automatic : Tabs are activated when receiving focus
composite boolean Whether the tab is composite
defaultValue string The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
deselectable boolean Whether the active tab can be deselected when clicking on it.
id string The unique identifier of the machine.
ids Partial<{ root: string; trigger: (id: string) => string; content: (id: string) => string; list: string; indicator: string; }> The ids of the elements in the tabs. Useful for composition.
loopFocus boolean true Whether the keyboard navigation will loop from last tab to first, and vice versa.
modelValue string The v-model value of the tabs
navigate (details: tabs.NavigateDetails) => void Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
translations tabs.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
# Tags Input > TagsInput, dressed in the paper-and-ink system: one field vessel whose chips rest as quiet ink and lift only a tone when edited. The parts — Root, Label, Control, Input, ClearTrigger, Item, ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput, Context. ## Basic usage :component-demo{name="tags-input/basic"}## Props ### ClearTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### Control A styled part — no props of its own; it takes the anatomy's shared styling. ### HiddenInput A styled part — no props of its own; it takes the anatomy's shared styling. ### Input A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemContext A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemDeleteTrigger A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemInput A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemPreview A styled part — no props of its own; it takes the anatomy's shared styling. ### ItemText A styled part — no props of its own; it takes the anatomy's shared styling. ### Item
Prop Type Default Description
disabled boolean | undefined —
index string | number —
value string —
### Label A styled part — no props of its own; it takes the anatomy's shared styling. ### Root
Prop Type Default Description
size String as PropType<"sm" | "md" | "lg"> "md" One rung of the control-height ladder for the vessel at rest.
addOnPaste boolean false Whether to add a tag when you paste values into the tag input
allowDuplicates boolean false Whether to allow duplicate tags
allowOverflow boolean Whether to allow tags to exceed max. In this case, we'll attach data-invalid to the root
autoFocus boolean Whether the input should be auto-focused
blurBehavior 'clear' | 'add' The behavior of the tags input when the input is blurred - "add" : add the input value as a new tag - "clear" : clear the input value
defaultInputValue string The initial tag input value when rendered. Use when you don't need to control the tag input value.
defaultValue string[] The initial tag value when rendered. Use when you don't need to control the tag value.
delimiter string | RegExp "," The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
disabled boolean Whether the tags input should be disabled
editable boolean true Whether a tag can be edited after creation, by pressing Enter or double clicking.
form string The associate form of the underlying input element.
id string The unique identifier of the machine.
ids Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item(opts: tagsInput.ItemProps): string; itemDeleteTrigger(opts: tagsInput.ItemProps): string; itemInput(opts: tagsInput.ItemProps): string; }> The ids of the elements in the tags input. Useful for composition.
inputValue string The controlled tag input's value
invalid boolean Whether the tags input is invalid
max number Infinity The max number of tags
maxLength number The max length of the input.
modelValue string[] The v-model value of the tags input
name string The name attribute for the input. Useful for form submissions
placeholder string The placeholder text for the input when there are no tags
readOnly boolean Whether the tags input should be read-only
required boolean Whether the tags input is required
sanitizeValue (value: string) => string Function to sanitize the tag value before adding it
translations tagsInput.IntlTranslations Specifies the localized strings that identifies the accessibility elements and their states
validate (details: tagsInput.ValidateArgs) => boolean Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
# Terminal > A quiet console: the transcript above, the prompt line below. The component owns only the reading and the caret — each entered line leaves as an event, and the caller answers through the lines prop, so history stays theirs to shape. ## Basic usage :component-demo{name="terminal/basic"}## Props ### Terminal A quiet console: the transcript above, the prompt line below. The component owns only the reading and the caret — each entered line leaves as an event, and the caller answers through the lines prop, so history stays theirs to shape.
Prop Type Default Description
lines Array as PropType () => [] The transcript, oldest line first.
prompt String "$" The sigil at the head of the entry line.
placeholder String undefined —
label String undefined —
# Textarea > The bare multi-line input: the field recipe on a `