# 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. ## Overview - [Elements](https://25c47dde.bs-elements.pages.dev/raw/index.md) ## Documentation Sets - [Elements — Full Documentation](https://25c47dde.bs-elements.pages.dev/llms-full.txt): Every documentation page of the Elements design system as a single markdown document. ## MCP Server This site exposes a Model Context Protocol (MCP) server over streamable HTTP at https://25c47dde.bs-elements.pages.dev/mcp. - [MCP endpoint](https://25c47dde.bs-elements.pages.dev/mcp): Streamable HTTP endpoint — connect an MCP client to this URL to call the tools, resources and prompts exposed by this site. ## Landing En Every page below is available as raw markdown. - [Elements](https://25c47dde.bs-elements.pages.dev/raw/en.md) ## Docs En Every page below is available as raw markdown. - [Accordion](https://25c47dde.bs-elements.pages.dev/raw/en/components/accordion.md): 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. - [Affix](https://25c47dde.bs-elements.pages.dev/raw/en/components/affix.md): 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. - [AI](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai.md): 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. - [AI Action](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-action.md): 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. - [AI Attachments](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-attachments.md): 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. - [AI Message](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-message.md): Whose stroke this is — the user's words sit in a recessed bubble, the assistant speaks flat on the paper. - [AI Prompt Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-prompt-input.md): 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. - [AI Reasoning](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-reasoning.md): The model's thought, folded by the shared collapsible in its quiet register: bare ink for a trigger, the thought on one hairline. - [AI Response](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-response.md): 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. - [AI Source](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-source.md): One place the ink came from; href and the rest ride the anchor. - [AI Suggestion](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-suggestion.md): A seal-cut button proposing the next stroke; selection hands back the prompt. The shared Button in its outline register. - [AI Tool](https://25c47dde.bs-elements.pages.dev/raw/en/components/ai-tool.md): 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. - [Alert](https://25c47dde.bs-elements.pages.dev/raw/en/components/alert.md): A notice drawn on the page: a wash of the status pigment, one heavier hairline on the leading edge, the serif for its title. - [Angle Slider](https://25c47dde.bs-elements.pages.dev/raw/en/components/angle-slider.md): 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. - [Aspect Ratio](https://25c47dde.bs-elements.pages.dev/raw/en/components/aspect-ratio.md): 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. - [Autocomplete](https://25c47dde.bs-elements.pages.dev/raw/en/components/autocomplete.md): 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. - [Avatar](https://25c47dde.bs-elements.pages.dev/raw/en/components/avatar.md): Avatar, dressed in the paper-and-ink system: a circular seal on inset paper that holds initials until the image loads over them. The parts — Root, Image, Fallback. - [Avatar Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/avatar-group.md): Avatars overlapping one row, each rimmed in the ground so the pile stays legible. - [Back Top](https://25c47dde.bs-elements.pages.dev/raw/en/components/back-top.md): 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. - [Badge](https://25c47dde.bs-elements.pages.dev/raw/en/components/badge.md): A small seal of state. Ink is the neutral tone; the four semantic pigments are fixed. Subtle and outline re-register the same pigment. - [Banner](https://25c47dde.bs-elements.pages.dev/raw/en/components/banner.md): 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. - [Breadcrumb](https://25c47dde.bs-elements.pages.dev/raw/en/components/breadcrumb.md): 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. - [Button](https://25c47dde.bs-elements.pages.dev/raw/en/components/button.md): 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. - [Button Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/button-group.md): 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. - [Calendar](https://25c47dde.bs-elements.pages.dev/raw/en/components/calendar.md): 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. - [Card](https://25c47dde.bs-elements.pages.dev/raw/en/components/card.md): 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. - [Carousel](https://25c47dde.bs-elements.pages.dev/raw/en/components/carousel.md): 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. - [Cascade Select](https://25c47dde.bs-elements.pages.dev/raw/en/components/cascade-select.md): 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. - [Chart](https://25c47dde.bs-elements.pages.dev/raw/en/components/chart.md): 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. - [Checkbox](https://25c47dde.bs-elements.pages.dev/raw/en/components/checkbox.md): 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. - [Checkbox Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/checkbox-group.md): 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. - [Chip](https://25c47dde.bs-elements.pages.dev/raw/en/components/chip.md): A counting coin: the numeric value, capped at `max` with an ellipsis of the remainder ("99+"). - [Client Only](https://25c47dde.bs-elements.pages.dev/raw/en/components/client-only.md): 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. - [Clipboard](https://25c47dde.bs-elements.pages.dev/raw/en/components/clipboard.md): 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. - [Collapsible](https://25c47dde.bs-elements.pages.dev/raw/en/components/collapsible.md): 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. - [Collection](https://25c47dde.bs-elements.pages.dev/raw/en/components/collection.md): The list and tree collections the machine-facing components compose alongside their namespace exports. - [Color Picker](https://25c47dde.bs-elements.pages.dev/raw/en/components/color-picker.md): 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. - [Combobox](https://25c47dde.bs-elements.pages.dev/raw/en/components/combobox.md): 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. - [Command](https://25c47dde.bs-elements.pages.dev/raw/en/components/command.md): 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). - [Comment](https://25c47dde.bs-elements.pages.dev/raw/en/components/comment.md): 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. - [Config Provider](https://25c47dde.bs-elements.pages.dev/raw/en/components/config-provider.md): The four density tiers the token layer's `[data-density]` selectors name — whitespace and control heights compress, readability never does. - [Container](https://25c47dde.bs-elements.pages.dev/raw/en/components/container.md): 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. - [Date Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/date-input.md): 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. - [Date Picker](https://25c47dde.bs-elements.pages.dev/raw/en/components/date-picker.md): 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. - [Descriptions](https://25c47dde.bs-elements.pages.dev/raw/en/components/descriptions.md): 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. - [Dialog](https://25c47dde.bs-elements.pages.dev/raw/en/components/dialog.md): 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. - [Download Trigger](https://25c47dde.bs-elements.pages.dev/raw/en/components/download-trigger.md): 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. - [Drawer](https://25c47dde.bs-elements.pages.dev/raw/en/components/drawer.md): 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. - [Dynamic Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/dynamic-input.md): 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. - [Editable](https://25c47dde.bs-elements.pages.dev/raw/en/components/editable.md): 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). - [Ellipsis](https://25c47dde.bs-elements.pages.dev/raw/en/components/ellipsis.md): 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. - [Empty](https://25c47dde.bs-elements.pages.dev/raw/en/components/empty.md): 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. - [Field](https://25c47dde.bs-elements.pages.dev/raw/en/components/field.md): 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. - [Fieldset](https://25c47dde.bs-elements.pages.dev/raw/en/components/fieldset.md): Fieldset, dressed in the paper-and-ink system: a song-serif legend heading a column of fields. The parts — Root, Legend, HelperText, ErrorText. - [File Upload](https://25c47dde.bs-elements.pages.dev/raw/en/components/file-upload.md): 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. - [Float Button](https://25c47dde.bs-elements.pages.dev/raw/en/components/float-button.md): The group's openness, shared from the mooring to its parts. - [Floating Panel](https://25c47dde.bs-elements.pages.dev/raw/en/components/floating-panel.md): 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. - [Focus Trap](https://25c47dde.bs-elements.pages.dev/raw/en/components/focus-trap.md): 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. - [Form](https://25c47dde.bs-elements.pages.dev/raw/en/components/form.md): The one error a field can carry: where it lives in the form state (dot notation for nested objects, indexes for arrays) and what went wrong. - [Format](https://25c47dde.bs-elements.pages.dev/raw/en/components/format.md): Format, dressed in the paper-and-ink system: Intl formatting for numbers, currency, bytes and relative time. The parts — Number, Byte, Time, RelativeTime. - [Frame](https://25c47dde.bs-elements.pages.dev/raw/en/components/frame.md): 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. - [Grid](https://25c47dde.bs-elements.pages.dev/raw/en/components/grid.md): An alignment lattice: tracks of equal measure, sized by column count — or, with `minChildWidth`, as many tracks as the container fits. - [Highlight](https://25c47dde.bs-elements.pages.dev/raw/en/components/highlight.md): 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. - [Hover Card](https://25c47dde.bs-elements.pages.dev/raw/en/components/hover-card.md): 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. - [Icon](https://25c47dde.bs-elements.pages.dev/raw/en/components/icon.md): 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 the glyph; it ships no set. - [Image](https://25c47dde.bs-elements.pages.dev/raw/en/components/image.md): 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. - [Image Cropper](https://25c47dde.bs-elements.pages.dev/raw/en/components/image-cropper.md): 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. - [Image Viewer](https://25c47dde.bs-elements.pages.dev/raw/en/components/image-viewer.md): 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. - [Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/input.md): 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. - [Input Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/input-group.md): 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. - [Json Tree View](https://25c47dde.bs-elements.pages.dev/raw/en/components/json-tree-view.md): 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. - [Kbd](https://25c47dde.bs-elements.pages.dev/raw/en/components/kbd.md): A keycap in miniature, riding the type it annotates. - [Layout](https://25c47dde.bs-elements.pages.dev/raw/en/components/layout.md): The application skeleton: Root, Header, Sider, Content, Footer — the admin arrangement (Element Plus / AntD keep the same anatomy) 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. - [Link](https://25c47dde.bs-elements.pages.dev/raw/en/components/link.md): 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. - [List](https://25c47dde.bs-elements.pages.dev/raw/en/components/list.md): 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. - [Listbox](https://25c47dde.bs-elements.pages.dev/raw/en/components/listbox.md): 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. - [Marquee](https://25c47dde.bs-elements.pages.dev/raw/en/components/marquee.md): 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. - [Masonry](https://25c47dde.bs-elements.pages.dev/raw/en/components/masonry.md): 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. - [Mentions](https://25c47dde.bs-elements.pages.dev/raw/en/components/mentions.md): 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`. - [Menu](https://25c47dde.bs-elements.pages.dev/raw/en/components/menu.md): 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. - [Menubar](https://25c47dde.bs-elements.pages.dev/raw/en/components/menubar.md): 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. - [Meter](https://25c47dde.bs-elements.pages.dev/raw/en/components/meter.md): 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. - [Navigation Menu](https://25c47dde.bs-elements.pages.dev/raw/en/components/navigation-menu.md): 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. - [Number Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/number-input.md): 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. - [Page Header](https://25c47dde.bs-elements.pages.dev/raw/en/components/page-header.md): 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. - [Pagination](https://25c47dde.bs-elements.pages.dev/raw/en/components/pagination.md): Pagination — paged navigation. Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger, FirstTrigger, LastTrigger. Items carry data-selected. - [Password Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/password-input.md): 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. - [Pin Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/pin-input.md): 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. - [Popconfirm](https://25c47dde.bs-elements.pages.dev/raw/en/components/popconfirm.md): 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). - [Popover](https://25c47dde.bs-elements.pages.dev/raw/en/components/popover.md): 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. - [Presence](https://25c47dde.bs-elements.pages.dev/raw/en/components/presence.md): 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. - [Progress](https://25c47dde.bs-elements.pages.dev/raw/en/components/progress.md): 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. - [Progress Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/progress-group.md): One verdict on the bar. - [QR Code](https://25c47dde.bs-elements.pages.dev/raw/en/components/qr-code.md): 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. - [Radio Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/radio-group.md): 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. - [Rating Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/rating-group.md): 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). - [Scroll Area](https://25c47dde.bs-elements.pages.dev/raw/en/components/scroll-area.md): 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. - [Segment Group](https://25c47dde.bs-elements.pages.dev/raw/en/components/segment-group.md): 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. - [Select](https://25c47dde.bs-elements.pages.dev/raw/en/components/select.md): 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. - [Separator](https://25c47dde.bs-elements.pages.dev/raw/en/components/separator.md): 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. - [Signature Pad](https://25c47dde.bs-elements.pages.dev/raw/en/components/signature-pad.md): 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. - [Skeleton](https://25c47dde.bs-elements.pages.dev/raw/en/components/skeleton.md): A waiting sheet of unset paper. Size it from the outside; the breath is the component's own. - [Slider](https://25c47dde.bs-elements.pages.dev/raw/en/components/slider.md): 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. - [Spinner](https://25c47dde.bs-elements.pages.dev/raw/en/components/spinner.md): A wheel of waiting: one arc of ink turning about its center. Quiet by default — it reports progress without claiming attention. - [Split Button](https://25c47dde.bs-elements.pages.dev/raw/en/components/split-button.md): 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. - [Splitter](https://25c47dde.bs-elements.pages.dev/raw/en/components/splitter.md): 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. - [Stack](https://25c47dde.bs-elements.pages.dev/raw/en/components/stack.md): 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. - [Stat](https://25c47dde.bs-elements.pages.dev/raw/en/components/stat.md): 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. - [Steps](https://25c47dde.bs-elements.pages.dev/raw/en/components/steps.md): 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. - [Swap](https://25c47dde.bs-elements.pages.dev/raw/en/components/swap.md): 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. - [Switch](https://25c47dde.bs-elements.pages.dev/raw/en/components/switch.md): 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. - [Table](https://25c47dde.bs-elements.pages.dev/raw/en/components/table.md): 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. - [Tabs](https://25c47dde.bs-elements.pages.dev/raw/en/components/tabs.md): Tabs — tabbed navigation. Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink bar on the list rule). - [Tags Input](https://25c47dde.bs-elements.pages.dev/raw/en/components/tags-input.md): 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. - [Textarea](https://25c47dde.bs-elements.pages.dev/raw/en/components/textarea.md): The bare multi-line input: the field recipe on a `