# @anyknown/ui > AnyKnown design system — StyleX tokens, themes, and React components for AI-agent products. Light by default, dark follows the OS. A pencil sketch: one sheet, no lines, nothing behind the words, ink for the primary action, color only for status. Each component has a page at https://ui.anyknown.com/#/components/ with live demos, props generated from the TypeScript source, and accessibility and keyboard notes. Every entry below links the markdown source; the #/ link is the same document on the site. ## Build an AnyKnown page - [design.md](https://ui.anyknown.com/design.md): how to compose a page and what must not appear (judgment), followed by generated token tables and the brand.css vocabulary. Read this first for one-off HTML: reports, proposals, benchmarks, event pages. - [brand.css](https://ui.anyknown.com/brand.css): the bounded vocabulary as one plain CSS file; `` and use it. Shortest form: wrap in `
`, one `ak-h1`, one `ak-prose`, one `ak-table`; a full example is in the design.md appendix. ## Guides - [Getting started](https://ui.anyknown.com/docs/getting-started.md): Install, peer dependencies, StyleX setup, tokens.css for non-StyleX apps, the Toaster / Dialogs hosts, LocaleProvider. On the site: https://ui.anyknown.com/#/guide/getting-started - [Theming](https://ui.anyknown.com/docs/theming.md): Light, dark and system; themes.stylex; data-theme for tokens.css; regenerating the palette. On the site: https://ui.anyknown.com/#/guide/theming - [State management](https://ui.anyknown.com/docs/state.md): createStore / useStore with selectors, the toast and dialog APIs, controlled vs uncontrolled props. On the site: https://ui.anyknown.com/#/guide/state - [Accessibility](https://ui.anyknown.com/docs/accessibility.md): Principles, what is tested (axe, keyboard, reduced motion), what callers must provide. On the site: https://ui.anyknown.com/#/guide/accessibility - [Internationalization](https://ui.anyknown.com/docs/i18n.md): LocaleProvider, labels props, defineStrings, adding a locale. On the site: https://ui.anyknown.com/#/guide/i18n - [Text layout](https://ui.anyknown.com/docs/text-layout.md): measureTextHeight, the optional Pretext engine, Textarea auto-grow. On the site: https://ui.anyknown.com/#/guide/text-layout - [Migrating to 0.10](https://ui.anyknown.com/docs/migration.md): Every breaking change and deprecation from 0.9 to 0.10 with before/after code. On the site: https://ui.anyknown.com/#/guide/migration - [Changelog](https://ui.anyknown.com/docs/changelog.md): What changed in each release. On the site: https://ui.anyknown.com/#/guide/changelog - [Package README](https://ui.anyknown.com/docs/readme.md): Package layout, development commands, release flow, infrastructure. On the site: https://ui.anyknown.com/#/guide/readme - [Component conventions](https://ui.anyknown.com/docs/components.md): The component list and the decisions every component shares (Base UI headless layer, no bounce, no useEffect, StyleX pitfalls). On the site: https://ui.anyknown.com/#/guide/components - [Decision log](https://ui.anyknown.com/docs/decisions.md): Why each component is the way it is, the dead ends and the traps: what the code and types do not show. On the site: https://ui.anyknown.com/#/guide/decisions - [Accessibility debt](https://ui.anyknown.com/docs/a11y.md): Known contrast and hit-target gaps below WCAG thresholds, with suggested fixes. On the site: https://ui.anyknown.com/#/guide/a11y - [Contributing](https://ui.anyknown.com/docs/contributing.md): Setup, scripts, commit convention, house rules, adding a component. On the site: https://ui.anyknown.com/#/guide/contributing ## Components - [ActionBar](https://ui.anyknown.com/docs/components/action-bar.md): The row of quiet actions under an assistant message — copy, regenerate, or your own — that fades in on hover without ever changing the turn's height. - [AttachButton](https://ui.anyknown.com/docs/components/attach-button.md): A 36px round `+` button for a chatbox that opens the system file picker and hands back the files chosen. - [Attachment](https://ui.anyknown.com/docs/components/attachment.md): The files a message carries, shown as 150px tiles in a wrapping row: a picture fills its tile with the caption in white over it, any other file shows a glyph under its name. - [Badge](https://ui.anyknown.com/docs/components/badge.md): Short words, some with a 6px dot. The family exports: - [Button](https://ui.anyknown.com/docs/components/button.md): A pill-shaped push button for an action on the page, from the one ink primary action down to a quiet ghost option. - [CallBar](https://ui.anyknown.com/docs/components/call-bar.md): The bar a chatbox turns into during a voice call: a breathing dot, what the call is doing, a `mm:ss` timer, mute, and a red hang-up button. - [Chart](https://ui.anyknown.com/docs/components/chart.md): A small chart drawn in pencil: marks in ink on three faint ticks, labels under them, and no frame, fill or legend. The library draws its own SVG and ships no chart package. The family exports: - [Checkbox](https://ui.anyknown.com/docs/components/checkbox.md): A native checkbox with a drawn box and tick, for an on/off choice that takes effect when the form is submitted. - [CodeBlock](https://ui.anyknown.com/docs/components/code-block.md): A block of Geist Mono code with a language label and a copy button, indented 16px, with no background, corner or line; `InlineCode` only switches a few words inside a sentence to Geist Mono. - [Composer](https://ui.anyknown.com/docs/components/composer.md): The prompt bar pinned to the bottom of a conversation: a growing textarea with `@` source suggestions, `/` commands, an optional model picker and mic toggle, and a round ink send button. - [DataTable](https://ui.anyknown.com/docs/components/data-table.md): A real `` with header sorting, a filter box, row selection and inline cell editing; its first consumer is the i18n dictionary editor. - [Dialog](https://ui.anyknown.com/docs/components/dialog.md): A modal dialog on Base UI Dialog, with a confirm variant for irreversible actions and an imperative store (`dialog.open` / `confirm` / `alert`) that renders through one `` host. - [DiffViewer](https://ui.anyknown.com/docs/components/diff-viewer.md): A unified diff of one file: line-level additions and removals told apart by `success` and `danger` text colour on the `+` / `-` line (no background), the changed words underlined or struck through inside a line, and long unchanged runs folded away. - [DropdownMenu](https://ui.anyknown.com/docs/components/dropdown.md): A menu of actions that opens from a trigger button, with groups, checkbox items, radio items, shortcut hints, danger items and nested submenus, built on Base UI Menu. - [Dropzone](https://ui.anyknown.com/docs/components/dropzone.md): A drop area for uploading files, with a "Choose files" button so dragging is never the only way in, and an `UploadList` that shows each file's progress or failure. - [EmptyState](https://ui.anyknown.com/docs/components/empty-state.md): An invitation to act where there is nothing to show yet: an optional line icon, a heading, one sentence, and the next action, left-aligned on the page, with no fill or corner. - [FileRow](https://ui.anyknown.com/docs/components/file-row.md): One row of a file browser (type icon, name, mono size, modified time, and a checkbox and actions that appear on hover), placed in a `FileList` card. - [Ghost](https://ui.anyknown.com/docs/components/ghost.md): A word that is a button: a 28 px muted text pill with no background until the pointer is on it. The family also exports `GhostLink`, the same word as a link. - [Group](https://ui.anyknown.com/docs/components/group.md): A grouped settings list: an optional muted header, then the 28px cells (44px on a phone) on the page with only space between them, then an optional muted footer that says what the settings do. - [HandoffReceipt](https://ui.anyknown.com/docs/components/handoff-receipt.md): One muted line in the thread's past, with the chevron after the words, that marks a session rotation — "換班完成 · time · ctx 50% → 新 session" — and expands in place to show what was handed over. - [Icon](https://ui.anyknown.com/docs/components/icon.md): Not a component: a StyleX size helper and a stroke constant, so icons you draw or import line up with the ones in the library. - [IconButton](https://ui.anyknown.com/docs/components/icon-button.md): A round button that holds one glyph and shows its name in a tooltip, for toolbars, sidebars and other tight chrome. - [Input](https://ui.anyknown.com/docs/components/input.md): A single-line text field drawn as a floating pill (`surfaceRaised`, `shadow.float`, no frame), with the same focus and error styling as Textarea, Select and PasswordInput. - [InteractionCard](https://ui.anyknown.com/docs/components/interaction-card.md): The two asks an agent shows when it is waiting on the person — `PermissionCard` asks to do something, `DecisionCard` asks a question — drawn straight on the page with no card: an amber 「等你允許」/「等你回答」 label with a 6px dot, the question in weight 500, then the replies. Once answered, each collapses to a grey 「已回覆」/「已回答」 label, the question in grey, and one muted line. - [Kbd](https://ui.anyknown.com/docs/components/kbd.md): Keyboard shortcut labels: a key drawn as Geist Mono `textMuted` text, with no border, fill or shadow. The family exports: - [Label](https://ui.anyknown.com/docs/components/label.md): `Label` is a form label with required and optional markers; `Field` wraps one control with its label, help text and error, and wires them together. - [List](https://ui.anyknown.com/docs/components/list.md): A list of things you open, such as memories or questions: a muted head over the columns, then 28px rows, each one button, with no frame and no mono. - [LiveDot](https://ui.anyknown.com/docs/components/live-dot.md): A single breathing `signal` dot that says "still running", for the current action in a tool log or a sub thread in progress. - [Markdown](https://ui.anyknown.com/docs/components/markdown.md): Renders one message's markdown — GFM tables, fenced code, task lists and TeX maths — as React elements, never through `innerHTML`. - [Message](https://ui.anyknown.com/docs/components/message.md): The desktop conversation layout: a `Thread` of turns, where the person's words sit right aligned at weight 500 with no bubble, and the agent's reply runs full width from the left edge at weight 400. - [Page](https://ui.anyknown.com/docs/components/page.md): The words and surfaces around a settings or dashboard page's rows: the page's one heading line, section labels, sentences under a section, a code snippet, a sunken panel, and small stats. - [PasswordInput](https://ui.anyknown.com/docs/components/password-input.md): A password or vault passphrase field with a show/hide toggle, an optional four-bar strength meter, a Caps Lock warning and a "does not match" check for confirm fields. - [PayloadBlock](https://ui.anyknown.com/docs/components/payload-block.md): A block of Geist Mono for what a tool was called with or gave back, indented 16px with no background or corner, a copy button at its end and no language header. - [PendingFiles](https://ui.anyknown.com/docs/components/pending-files.md): A wrapping row of outline chips, one per file picked for the next message and not sent yet, each with a `×` to take it off. - [Popover](https://ui.anyknown.com/docs/components/popover.md): A floating card anchored to a trigger, built on Base UI Popover, for rich content such as memory details or a member card. - [Progress](https://ui.anyknown.com/docs/components/progress.md): Progress and loading indicators. A bar uses the blue `signal` fill on a `washStrong` track because it means "the agent is working"; rings are readings (such as context use) and stay ink (`text`). The family exports: - [Radio](https://ui.anyknown.com/docs/components/radio.md): `Radio` is a native radio button with a drawn dot; `RadioGroup` holds a set of them under a `fieldset` and `legend` and owns the selected value. - [ReasoningFold](https://ui.anyknown.com/docs/components/reasoning-fold.md): A row with no fill (a `wash` pill on hover) that folds away the agent's thinking: collapsed it says "思考了 N 秒", while streaming it opens and shimmers "思考中…". - [RecoveryKey](https://ui.anyknown.com/docs/components/recovery-key.md): The card that shows a vault's recovery key once, when the vault is created or the key is reissued. The key is blurred until revealed, with copy, download, a warning, and an "I have written it down" checkbox. - [Segmented](https://ui.anyknown.com/docs/components/segmented.md): A row of a few short words with no track, where the chosen one is a `wash` capsule in weight 600: a radio group drawn as a segmented control. - [Select](https://ui.anyknown.com/docs/components/select.md): A trigger styled like an input that opens a floating list with a search box, optional groups and optional multiple selection, built on Base UI Combobox. - [SettingsRows](https://ui.anyknown.com/docs/components/settings-rows.md): Dense settings rows on the page: each 36px row has the setting's name and one line of help on the left and its control on the right, with no fill, corners or lines between rows. - [Sheet](https://ui.anyknown.com/docs/components/sheet.md): A modal panel that slides up from the bottom of the window, built on Base UI Drawer, for a choice on a narrow screen such as a model or an effort level. - [Skeleton](https://ui.anyknown.com/docs/components/skeleton.md): Loading placeholders shaped like the content they stand in for, with a slow shimmer, so the layout does not jump when the content arrives. The family exports: - [Slider](https://ui.anyknown.com/docs/components/slider.md): A horizontal control for one continuous amount, such as how much the agent thinks or a threshold, with no tick marks. - [Spin](https://ui.anyknown.com/docs/components/spin.md): A 12 px spinning ring in the current text color, the one thing on a button or chip that moves while it waits. - [Stack](https://ui.anyknown.com/docs/components/stack.md): A flex layout with a token gap. Space is the only separator: no line, no fill, no card. The family exports: - [Stat](https://ui.anyknown.com/docs/components/stat.md): A big number with a small grey label above it and an optional one-line note below. No card, fill or line: size, weight and one grey carry the order. The family exports: - [StatusBadge](https://ui.anyknown.com/docs/components/status-badge.md): A state word with a 6 px dot, in its state's colour and with no fill, for the head of something that runs on its own, such as a screen the AI is driving: `live` while it runs, `warn` when it needs you, `plain` when it is over. - [StatusChip](https://ui.anyknown.com/docs/components/status-chip.md): A mono word, told apart by its colour alone (no fill, frame or ring), that marks what a tool call does or how it went, keyed by a one-letter status code. The folder also exports `Pill`, the mono words (with an optional 6 px dot) a fold's first line is made of. - [SubThreadRow](https://ui.anyknown.com/docs/components/sub-thread.md): A sub agent's run inside a thread, drawn the way Anyknown Desktop draws it: the title in weight 500 from the left edge with the chevron after the words, and the status as a coloured word on the line under it. No fill. The whole row opens the run. While the run is not over, what it is doing shows indented one step under it. - [Switch](https://ui.anyknown.com/docs/components/switch.md): An on/off toggle that takes effect immediately, built on a native checkbox with `role="switch"`. - [Table](https://ui.anyknown.com/docs/components/table.md): Low-level parts for a ledger: a full-width grid with one line of small muted labels, rows with no lines between them, and rows that wrap to two lines on a phone. - [Tabs](https://ui.anyknown.com/docs/components/tabs.md): Switches between panels of content at the same level, built on Base UI Tabs, drawn as words, the open one in weight 600 on a sliding `wash` capsule. - [Text](https://ui.anyknown.com/docs/components/text.md): A block of text in one of the library's type styles, rendered as any element you choose. - [Textarea](https://ui.anyknown.com/docs/components/textarea.md): A multi-line text field with the same styling as Input (`corner.box` instead of a pill), which can grow with its content up to a row limit. - [Toast](https://ui.anyknown.com/docs/components/toast.md): Non-blocking notifications: `toast(...)` adds one from anywhere, and `` is the viewport that stacks them in a corner, counts them down and announces them. - [ToolGroup](https://ui.anyknown.com/docs/components/tool-group.md): A run of tool calls in a thread, drawn the way Anyknown Desktop draws it: one muted line that counts the calls and names each tool once ("用了 3 次工具：read ×2、shell"), with the chevron after the words, and a list indented one step with no frame and no rules. Each row is a ✓ (or a red ✕), the summary in Geist Mono and a muted duration. A row opens to the call's input and output. - [Tooltip](https://ui.anyknown.com/docs/components/tooltip.md): A small floating hint that appears after 400ms of hover or at once on keyboard focus, with one line of text and an optional shortcut, built on Base UI Tooltip. - [VoiceIndicator](https://ui.anyknown.com/docs/components/voice-indicator.md): A line and a sentence, with no fill, that show at a glance whether the voice agent is idle, listening, thinking or speaking, drawn as one animated line next to a status sentence. ## Optional - [Everything in one file](https://ui.anyknown.com/llms-full.txt): every guide and component page above, for loading into one context. ## Package - npm: https://www.npmjs.com/package/@anyknown/ui (MIT) - Source: https://github.com/anyknown-com/ui - Entry points: `@anyknown/ui`, `@anyknown/ui/tokens.stylex`, `@anyknown/ui/themes.stylex`, `@anyknown/ui/tokens.css`, `@anyknown/ui/scrollbar.css`, `@anyknown/ui/brand.css`