# Showcase _Box Kite 2.1.0 · a markdown copy of https://www.box-kite.dev/showcase/_ All 38 components on one page, each drawn twice — a light theme and a dark one, side by side, whatever theme you are reading in. ## Both themes at once Each card renders its component twice, and the two halves are nothing but a `` each. A theme is a class on an ancestor and every rule is scoped to the subtree it owns, so a light half inside a dark page is light throughout — including for the props the inner theme never mentions. No re-render, no context read in a component, no second stylesheet. ```jsx ``` Where a component paints in the top layer — a dialog, a menu, a tooltip — the card shows the trigger, which is what the page itself draws. Every card links to the page that documents the rest of it, and every snippet on those pages opens in the [playground](https://www.box-kite.dev/playground.md). ## Forms A real native control each, and the label that names it. ### Button [Docs →](https://www.box-kite.dev/button.md) Three variants, and the disabled state of one. ### Textbox [Docs →](https://www.box-kite.dev/textbox.md) An input, with the placeholder styled as a nested prop. ### Textarea [Docs →](https://www.box-kite.dev/textarea.md) The same field, taller, and growing with what is typed. ### Checkbox [Docs →](https://www.box-kite.dev/checkbox.md) A native input; the label is the component’s own job. ### RadioGroup [Docs →](https://www.box-kite.dev/radiobutton.md) The APG radio group: one name, one tab stop, arrow keys. ### RadioButton [Docs →](https://www.box-kite.dev/radiobutton.md) The same input on its own, for a group you assemble. ### Switch [Docs →](https://www.box-kite.dev/switch.md) role="switch" over a checkbox, so Enter toggles it too. ### Slider [Docs →](https://www.box-kite.dev/slider.md) One thumb or two — the value’s shape decides which. ## Layers In the browser's top layer: no portal, no z-index, no focus trap written here. ### Popover [Docs →](https://www.box-kite.dev/popover.md) The Popover API: light dismiss and focus return are the browser’s. At rest, its trigger. ### Dialog [Docs →](https://www.box-kite.dev/dialog.md) A real with showModal(). At rest, its trigger. ### AlertDialog [Docs →](https://www.box-kite.dev/dialog.md) The same, never dismissed by a press outside. At rest, its trigger. ### Menu [Docs →](https://www.box-kite.dev/menu.md) APG’s menu button, submenus included. At rest, its trigger. ### Tooltip [Docs →](https://www.box-kite.dev/tooltip.md) Hover or focus the button. At rest, its trigger. ### Dropdown [Docs →](https://www.box-kite.dev/dropdown.md) The select-only combobox, closed — which is the control itself. ### Combobox [Docs →](https://www.box-kite.dev/combobox.md) The editable one: a row in is a row out, typed. ### Overlay [Docs →](https://www.box-kite.dev/overlay.md) Positioning with no pattern on it — shown open, beside its anchor. ## Disclosure Open and shut, animated by a grid track rather than a measured height. ### Tabs [Docs →](https://www.box-kite.dev/tabs.md) One tab stop for the list, and selection follows focus. ### Accordion [Docs →](https://www.box-kite.dev/accordion.md) A heading per section, and a panel that is never measured. ### Collapsible [Docs →](https://www.box-kite.dev/accordion.md) One disclosure, with a trigger of your own and no heading. ## Feedback What is happening, what happened, and what is not there yet. ### Progress [Docs →](https://www.box-kite.dev/progress.md) A value, and the indeterminate state that reports none. ### Toaster [Docs →](https://www.box-kite.dev/toaster.md) A viewport is one per app, so the page mounts one. Press to send it a toast. ### Skeleton [Docs →](https://www.box-kite.dev/agent.md) Bars with a travelling gloss, aria-hidden unless labelled. ### Presence [Docs →](https://www.box-kite.dev/animation.md) The ~1 KB that lets a node animate on its way out. ## Data Rows, and the space somebody rearranges them in. ### DataGrid [Docs →](https://www.box-kite.dev/datagrid.md) Four rows of the grid that does a million. ### DashboardGrid [Docs →](https://www.box-kite.dev/dashboard.md) A layout in cells, compacted upward. Add editable for the handles. ### Widget [Docs →](https://www.box-kite.dev/dashboard.md) The chrome, and its four states — here: filled, loading, empty. ## Charts Box props on a shape. Not a chart library — no axes, no legends. ### Sparkline [Docs →](https://www.box-kite.dev/charts.md) A line, an area and bars off the same eight numbers. ### ProgressRing [Docs →](https://www.box-kite.dev/charts.md) A fraction, rounded into a class so it still transitions. ### Gauge [Docs →](https://www.box-kite.dev/charts.md) The same arithmetic over a sweep you choose. ### MiniDonut [Docs →](https://www.box-kite.dev/charts.md) The one primitive that needs a list of colours. ### ChartContainer [Docs →](https://www.box-kite.dev/charts.md) Declares --color-, so the chart names no colour at all. ## Agent What a model ran, what it wants permission for, and what it said. ### ToolCallCard [Docs →](https://www.box-kite.dev/agent.md) Four statuses, each carrying its own word beside the dot. ### ApprovalCard [Docs →](https://www.box-kite.dev/agent.md) A question somebody answers, not a stage a call passes through. ### Reasoning [Docs →](https://www.box-kite.dev/agent.md) Closed by default, opening in the accordion’s own grid track. ### StreamingText [Docs →](https://www.box-kite.dev/agent.md) Give it the message so far; a whole one paints at once. ## Primitives The three that are the element they name. ### Flex [Docs →](https://www.box-kite.dev/flex.md) display: flex, and every alignment prop that goes with it. ### Grid [Docs →](https://www.box-kite.dev/grid.md) display: grid, with the track props as values. ### Icon [Docs →](https://www.box-kite.dev/icon.md) Box props on an icon somebody else drew. --- _Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_