# astryx-vue

> A community Vue 3 implementation of the Astryx design system: 245 documented components, themes, and an agent-friendly CLI.

Every link below is the plain Markdown version of a page. Add `.md` to any page URL to get the same text.

The whole documentation in one file: [llms-full.txt](https://astryx-vue.pages.dev/llms-full.txt).

## Guide

- [Introduction](https://astryx-vue.pages.dev/en/guide/why.md): astryx-vue is an open-source Vue 3 reimplementation of Meta's Astryx design language. The upstream documentation is located at <https://astryx.atmeta.com>…
- [Principles](https://astryx-vue.pages.dev/en/guide/principles.md): Every decision in this library follows from four sentences.
- [Quick start](https://astryx-vue.pages.dev/en/guide/getting-started.md): Install the components and the theme. The peer dependency is Vue ^3.5.0.
- [Installation](https://astryx-vue.pages.dev/en/guide/installation.md): @astryx-vue/core peers on vue: ^3.5.0. The theme package depends on @fontsource/figtree and @fontsource/jetbrains-mono for the body and monospace faces. Both…
- [CLI](https://astryx-vue.pages.dev/en/guide/cli.md): @astryx-vue/cli looks up astryx-vue component docs and playground pages from the terminal, for people and for agents. The binary is astryx-vue. It is not…
- [Working with AI](https://astryx-vue.pages.dev/en/guide/working-with-ai.md): An AI writing component code makes two mistakes more than any other: it guesses props, and it copies React idioms from upstream. One instruction file and one…
- [Theme and styles](https://astryx-vue.pages.dev/en/guide/styling.md): An app imports two things at minimum: a theme, and structural styles for the components it uses.
- [Icons](https://astryx-vue.pages.dev/en/guide/icons.md): Draw an icon with Icon and an Iconify name. You do not import a component for each glyph.
- [Composables](https://astryx-vue.pages.dev/en/guide/composables.md): There is no @astryx-vue/core/composables subpath. The functions exported from packages/core/src/composables/index.ts are below. Parameters are the TypeScript…
- [Patterns](https://astryx-vue.pages.dev/en/guide/patterns.md): A conversation is a composition. The transcript, bubbles, reasoning, tool calls, citations, and the composer are separate components, and the page decides how…
- [Templates](https://astryx-vue.pages.dev/en/guide/templates.md): Each playground page is a starting point you can edit. Choosing one puts its source in the editor, and the preview follows the theme. Add ?template= to open a…
- [Links and routers](https://astryx-vue.pages.dev/en/guide/links.md): A jump in the app is one of two things. A normal href lets the browser open the address. A route that should stay inside Vue Router, without a full page load…
- [Page layout](https://astryx-vue.pages.dev/en/guide/layout.md): Build a page from the outside in. Settle the frame and how much room each region gets before you write any content. Doing it the other way round, content…
- [Responsive layout](https://astryx-vue.pages.dev/en/guide/responsive.md): Decide what each region does as the width drops, then wire the components. A region can stay and get narrower, move into a layer that opens on demand, or leave…
- [Accessibility](https://astryx-vue.pages.dev/en/guide/accessibility.md): Components are built around accessible names, the keyboard, and screen readers. Docs and examples do not drop the focus ring or the contrast to get a look.
- [Dark mode](https://astryx-vue.pages.dev/en/guide/dark-mode.md): Neutral does not ship a separate dark stylesheet. Each color is light-dark(light, dark), and the element's color-scheme picks the stop.
- [Internationalization](https://astryx-vue.pages.dev/en/guide/i18n.md): Strings that the components speak come from a message catalog. They are not hard-coded at every call site. The built-in locales are en and zh-CN. The type…
- [Browser support](https://astryx-vue.pages.dev/en/guide/browser-support.md): These components solve styling and layering with what browsers ship, not with JavaScript patches. The upside is small code, good accessibility, and no extra…
- [Changelog](https://astryx-vue.pages.dev/en/guide/changelog.md): The two packages publish together. This page repeats what CHANGELOG.md already records. It is not a roadmap.
- [Upgrade guide](https://astryx-vue.pages.dev/en/guide/migration.md): This version matches Astryx v0.7.1. The previous version matched 0.4.1.
- [Contributing](https://astryx-vue.pages.dev/en/guide/contributing.md): The repository is <https://github.com/astryx-vue/astryx-vue>. Use GitHub Issues. The license is MIT.

## Themes

- [Overview](https://astryx-vue.pages.dev/en/themes.md): A theme sets the color, type, radius, shadow, and motion the components use. Structural styles stay in @astryx-vue/core.
- [Neutral](https://astryx-vue.pages.dev/en/themes/neutral.md): That entry loads fonts.css, then each file under neutral/ in name order, including base.css. fonts.css loads Figtree and JetBrains Mono at 400, 500, 600, 700…
- [Butter](https://astryx-vue.pages.dev/en/themes/butter.md): Golden surfaces, blue accents. Outfit for text, Sarina for display sizes.
- [Chocolate](https://astryx-vue.pages.dev/en/themes/chocolate.md): Warm brown and beige. Albert Sans for text, Fraunces for headings.
- [Gothic](https://astryx-vue.pages.dev/en/themes/gothic.md): Dark only. Deep blue-gray surfaces stay dark when the rest of the page is light. Fustat for text, Manufacturing Consent for display sizes.
- [Matcha](https://astryx-vue.pages.dev/en/themes/matcha.md): Earthy greens. DM Sans for text, Playwrite US Trad for headings.
- [Stone](https://astryx-vue.pages.dev/en/themes/stone.md): Warm stone and slate. Figtree for text, Montserrat for headings.
- [Y2K](https://astryx-vue.pages.dev/en/themes/y2k.md): Periwinkle, cream, and sharp corners. Poppins for text, Crimson Text for display sizes.
- [Extend a theme](https://astryx-vue.pages.dev/en/themes/extending.md): @astryx-vue/themes ships Neutral, Butter, Chocolate, Gothic, Matcha, Stone, and Y2K. Each one is a CSS entry such as butter.css plus the stylesheets in that…
- [Design tokens](https://astryx-vue.pages.dev/en/themes/tokens.md): A design token is a decision the system can reuse: a color, a space step, a radius, a duration. Components read tokens instead of hard-coding those numbers…
- [CSS variables](https://astryx-vue.pages.dev/en/themes/css-variables.md): Themes and component styles use CSS variables and cascade layers. You do not install UnoCSS or StyleX to use them.
- [Color](https://astryx-vue.pages.dev/en/themes/color.md): Neutral colors are --astryx-color-. Each one uses light-dark() for the light stop and the dark stop. In the grid below, the left chip is light and the right…
- [Typography](https://astryx-vue.pages.dev/en/themes/typography.md): Two font stacks live on Neutral's semantic tokens.
- [Motion](https://astryx-vue.pages.dev/en/themes/motion.md): Durations come from the Neutral motion scale. The bases are fast 125, medium 300, and slow 700. Neighbors use a 0.75 ratio, and the results are rounded to 5…
- [Space, radius, shadow](https://astryx-vue.pages.dev/en/themes/scale.md): Spacing runs from --astryx-spacing-0 through --astryx-spacing-12, with 0.5 and 1.5 in between. The values are rem: --astryx-spacing-2 is 0.5rem and…

## Components

- [Button](https://astryx-vue.pages.dev/en/components/button.md): Button triggers an action. Set label to name the action.
- [Button Group](https://astryx-vue.pages.dev/en/components/button-group.md): Three related actions joined into a single connected control. Provide a group label for accessibility and keep all buttons the same variant so they read as one…
- [Context Menu](https://astryx-vue.pages.dev/en/components/context-menu.md): ContextMenu gives one region of the interface its own actions: a right-click inside the trigger area — or the keyboard's context-menu key, or a long press on…
- [Context Menu Item](https://astryx-vue.pages.dev/en/components/context-menu-item.md): Menu item component for compound mode. Re-exported from DropdownMenuItem for discoverability.
- [Dropdown Menu](https://astryx-vue.pages.dev/en/components/dropdown-menu.md): DropdownMenu turns a button into the entry point for a small set of actions. The button stays quiet; the menu appears next to it when opened, closes as soon as…
- [Dropdown Menu Item](https://astryx-vue.pages.dev/en/components/dropdown-menu-item.md): Helper component for custom item rendering with consistent styling. Host attributes and DOM event handlers (aria-, data-, id, drag and drop) reach the row…
- [Dropdown Menu Group](https://astryx-vue.pages.dev/en/components/dropdown-menu-group.md): A titled group of rows in a compound menu. Renders role="group" named by its heading; the heading is plain text, not a menuitem, so arrow keys and typeahead…
- [Dropdown Menu Divider](https://astryx-vue.pages.dev/en/components/dropdown-menu-divider.md): A horizontal rule separating groups of rows in a compound menu. Renders role="separator", so it is never a stop in the arrow-key order. The data-driven…
- [Dropdown Menu Submenu](https://astryx-vue.pages.dev/en/components/dropdown-menu-submenu.md): A single menu row that reveals a nested flyout of its own items. The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled); its…
- [Icon Button](https://astryx-vue.pages.dev/en/components/icon-button.md): Icon fills the square the button already sizes. Leave size unset. A CSS icon class still works in the slot when your build generates it; UnoCSS is not required.
- [Link](https://astryx-vue.pages.dev/en/components/link.md): Link navigates inside the app or out of it. With href it renders an anchor. Pass as to use a router link or another component; that component receives both…
- [More Menu](https://astryx-vue.pages.dev/en/components/more-menu.md): MoreMenu is an overflow menu behind a ⋯ trigger. It holds the actions that do not need to stay visible: secondary actions in a table row, a card header, or a…
- [Segmented Control](https://astryx-vue.pages.dev/en/components/segmented-control.md): SegmentedControl lays a small set of mutually exclusive options out in one row, with exactly one of them selected at all times. It looks like a tab bar but…
- [Segmented Control Item](https://astryx-vue.pages.dev/en/components/segmented-control-item.md): Individual segment item rendering as a radio button within the segmented control.
- [Toggle Button](https://astryx-vue.pages.dev/en/components/toggle-button.md): ToggleButton is a button with a pressed and an unpressed state. It stands for a lasting choice — bold text, a view mode, a favorite, a running recording —…
- [Toolbar](https://astryx-vue.pages.dev/en/components/toolbar.md): Toolbar is a role="toolbar". label is required. start, center, and end are three groups. Arrow keys move focus across them, and Home and End jump to the ends…
- [Toggle Button Group](https://astryx-vue.pages.dev/en/components/toggle-button-group.md): ToggleButtonGroup keeps the pressed state of its ToggleButton children. Each child needs a value. The group's v-model:value replaces that button's own pressed…
- [Dropdown Menu Checkbox Item](https://astryx-vue.pages.dev/en/components/dropdown-menu-checkbox-item.md): DropdownMenuCheckboxItem is one checkable row inside a Dropdown Menu. Its role is menuitemcheckbox. It toggles its own boolean and leaves the menu open, so…
- [Dropdown Menu Radio Group](https://astryx-vue.pages.dev/en/components/dropdown-menu-radio-group.md): DropdownMenuRadioGroup is a single-select set of radio rows inside a Dropdown Menu. Its role is group, and each option is a Dropdown Menu Radio Item with role…
- [Dropdown Menu Radio Item](https://astryx-vue.pages.dev/en/components/dropdown-menu-radio-item.md): DropdownMenuRadioItem is one option in a Dropdown Menu Radio Group. Its role is menuitemradio. It has to sit inside that group. The group's value matches this…
- [Chat](https://astryx-vue.pages.dev/en/components/chat.md): The chat display is a set of pieces that stack into a transcript: a scrolling layout, a message log, rows for each sender, bubbles, tool calls, a reasoning…
- [Chat Layout](https://astryx-vue.pages.dev/en/components/chat-layout.md): ChatLayout is the layout shell for full-page chat interfaces. It renders messages in normal page flow and docks the composer to the bottom with a frosted glass…
- [Chat Layout Scroll Button](https://astryx-vue.pages.dev/en/components/chat-layout-scroll-button.md): Floating scroll-to-bottom button that appears when the user scrolls away from the latest messages. It fades in as a compact icon button and expands to show a…
- [Chat Message](https://astryx-vue.pages.dev/en/components/chat-message.md): Sender context wrapper: handles avatar, name, metadata, and alignment based on sender role.
- [Chat Tool Calls](https://astryx-vue.pages.dev/en/components/chat-tool-calls.md): ChatToolCalls displays tool or function call invocations from an LLM response. Pass an array of calls and the component handles the rest: a single call renders…
- [Chat Message List](https://astryx-vue.pages.dev/en/components/chat-message-list.md): Presentational message container with density context and infinite scroll support. Provides role="log" with aria-live="polite" for accessibility. A flex spacer…
- [Chat Message Bubble](https://astryx-vue.pages.dev/en/components/chat-message-bubble.md): Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and…
- [Chat System Message](https://astryx-vue.pages.dev/en/components/chat-system-message.md): Use ChatSystemMessage for concise, non-sender content inside a chat transcript. Choose the default variant for factual status notices and the divider variant…
- [Chat Tokenized Text](https://astryx-vue.pages.dev/en/components/chat-tokenized-text.md): Use ChatTokenizedText inside a chat message when stored plain text contains serialized token values that should be projected as inline badges or…
- [Chat Message Metadata](https://astryx-vue.pages.dev/en/components/chat-message-metadata.md): Place ChatMessageMetadata below a message or in the last ChatMessageBubble metadata slot to show a timestamp, footer content, and optional delivery status…
- [Chat Composer](https://astryx-vue.pages.dev/en/components/chat-composer.md): ChatComposer is the message-entry shell for a chat surface. It coordinates a controlled or uncontrolled draft, provides a default token-capable input and…
- [Chat Send Button](https://astryx-vue.pages.dev/en/components/chat-send-button.md): Use ChatSendButton as ChatComposer’s send control when the action should switch between sending and stopping. Inside ChatComposer it reads readiness, streaming…
- [Chat Composer Input](https://astryx-vue.pages.dev/en/components/chat-composer-input.md): Pass ChatComposerInput to ChatComposer's input slot when the draft needs trigger menus, inline tokens, history recall, dictation insertion, or file intake.
- [Chat Composer Drawer](https://astryx-vue.pages.dev/en/components/chat-composer-drawer.md): Use ChatComposerDrawer in the ChatComposer drawer slot for supplementary content such as attachments, context chips, or previews. Provide count only when…
- [Chat Dictation Button](https://astryx-vue.pages.dev/en/components/chat-dictation-button.md): ChatDictationButton is a toggle button that starts and stops voice dictation inside a chat composer. It pairs with useChatDictation to show a microphone icon…
- [Chat Composer Token Element](https://astryx-vue.pages.dev/en/components/chat-composer-token-element.md): Renders a single token chip outside the contentEditable input. Wraps a badge config or custom render function in the correct data-astryx-token span so the…
- [Card](https://astryx-vue.pages.dev/en/components/card.md): Card is a bordered surface with a background and rounded corners, and it turns a group of content into one thing you can treat on its own. Its job is…
- [Collapsible](https://astryx-vue.pages.dev/en/components/collapsible.md): Collapsible folds one content region behind a trigger: the trigger stays visible and a click expands or collapses the content underneath. It belongs in…
- [Clickable Card](https://astryx-vue.pages.dev/en/components/clickable-card.md): ClickableCard is a card whose whole surface activates one action. The keyboard stop is a visually hidden link when href is set, and a button otherwise. Nested…
- [Selectable Card](https://astryx-vue.pages.dev/en/components/selectable-card.md): SelectableCard is a card with a selected state. The keyboard stop is a visually hidden checkbox. Bind the state with v-model:is-selected, or pass :is-selected…
- [Collapsible Group](https://astryx-vue.pages.dev/en/components/collapsible-group.md): CollapsibleGroup coordinates the Collapsible sections inside it. Give each section a value. Inside the group, that section's own isOpen is ignored.
- [Carousel](https://astryx-vue.pages.dev/en/components/carousel.md): Carousel scrolls a row of items sideways. The root is a region with aria-roledescription="carousel". Each direct child is one slide, named Slide N of M.
- [Avatar](https://astryx-vue.pages.dev/en/components/avatar.md): Import the component from its dedicated entry. Structural styles are loaded automatically.
- [Avatar Status Dot](https://astryx-vue.pages.dev/en/components/avatar-status-dot.md): Status indicator dot for Avatar. Put one in the avatar's status slot and it sits on the bottom-right corner, showing whether someone is online, away, or busy…
- [Avatar Group](https://astryx-vue.pages.dev/en/components/avatar-group.md): Import the components from their dedicated entry. Structural styles are loaded automatically.
- [Avatar Group Overflow](https://astryx-vue.pages.dev/en/components/avatar-group-overflow.md): AvatarGroupOverflow appears at the end of an AvatarGroup to summarize people who are not shown individually. Use it when a group is sliced to a small number of…
- [Blockquote](https://astryx-vue.pages.dev/en/components/blockquote.md): Import the component from its dedicated entry. The component loads its structural styles.
- [Citation](https://astryx-vue.pages.dev/en/components/citation.md): Citation marks a source inside a sentence. The label variant is a chip with the source title. The number variant is a compact superscript. Pass number as the…
- [Code](https://astryx-vue.pages.dev/en/components/code.md): Code marks a short technical reference inside a sentence, such as a function name, a prop, a file path, or a command-line flag. It renders a semantic <code>…
- [Empty State](https://astryx-vue.pages.dev/en/components/empty-state.md): EmptyState fills a region that has no content yet: a search that returned nothing, a list that is still empty, a page the user is visiting for the first time…
- [Heading](https://astryx-vue.pages.dev/en/components/heading.md): Import the component from its dedicated entry. Structural styles are loaded automatically.
- [Kbd](https://astryx-vue.pages.dev/en/components/kbd.md): Kbd presents a keyboard shortcut as a small group of painted key badges, such as ⌘K or ⇧↵. It belongs next to the action it triggers — on the right of a menu…
- [Markdown](https://astryx-vue.pages.dev/en/components/markdown.md): Markdown renders a Markdown source as prose. It covers headings, paragraphs, emphasis, links, inline code, code blocks, quotes, lists, task lists, tables…
- [Text](https://astryx-vue.pages.dev/en/components/text.md): Import the component from its dedicated entry. Structural styles are loaded automatically.
- [Thumbnail](https://astryx-vue.pages.dev/en/components/thumbnail.md): Thumbnail is a 64px preview. With no src it shows a placeholder. isLoading without src is a skeleton. isLoading with src covers the image with a spinner…
- [Timestamp](https://astryx-vue.pages.dev/en/components/timestamp.md): Timestamp renders one instant in a <time> element. value is an ISO string or a unix timestamp in seconds. The default format is auto: a relative phrase while…
- [Token](https://astryx-vue.pages.dev/en/components/token.md): Token is an interactive chip. It can be removed, clicked, or used as a link, for a selected value or a filter. Badge is a static status or count marker.
- [Code Block](https://astryx-vue.pages.dev/en/components/code-block.md): CodeBlock shows a read-only snippet. Import it from @astryx-vue/core/Code, next to inline Code. The code string is what the reader sees and what the copy…
- [Timer](https://astryx-vue.pages.dev/en/components/timer.md): Timer writes a running duration into a <time> element. startTime is unix milliseconds. Omit it and the count starts when this timer mounts. The text and…
- [Icon](https://astryx-vue.pages.dev/en/components/icon.md): Icon draws one icon from an Iconify collection. Pass the name. You do not import an icon component for each glyph.
- [Badge](https://astryx-vue.pages.dev/en/components/badge.md): Import the component from its dedicated entry. The component loads its structural styles.
- [Banner](https://astryx-vue.pages.dev/en/components/banner.md): Use Banner for persistent messages that require attention or action.
- [Progress Bar](https://astryx-vue.pages.dev/en/components/progress-bar.md): ProgressBar shows the completion ratio of an operation.
- [Skeleton](https://astryx-vue.pages.dev/en/components/skeleton.md): Import the component from its dedicated entry. The component loads its structural styles.
- [Spinner](https://astryx-vue.pages.dev/en/components/spinner.md): Spinner shows a loading state when the duration of a process is unknown.
- [Status Dot](https://astryx-vue.pages.dev/en/components/status-dot.md): Import the component from its dedicated entry. Structural styles are loaded automatically.
- [Calendar](https://astryx-vue.pages.dev/en/components/calendar.md): Calendar shows one or two months and selects a day or a start and end. It opens on the requested month, or on the selected day, or on today when that day still…
- [Checkbox Input](https://astryx-vue.pages.dev/en/components/checkbox-input.md): Use CheckboxInput for a boolean option or a list of independent choices. The component includes a label, description and status message.
- [Checkbox List](https://astryx-vue.pages.dev/en/components/checkbox-list.md): CheckboxList is a field around a list of CheckboxListItem rows. With v-model, the value is the array of checked item values.
- [Checkbox List Item](https://astryx-vue.pages.dev/en/components/checkbox-list-item.md): Individual checkbox item with label, description, and end content slot. Works in collection mode (inside a CheckboxList with a value array) or standalone mode…
- [Date Input](https://astryx-vue.pages.dev/en/components/date-input.md): DateInput is a text field with a calendar button. People can type a date or open the calendar and pick a day.
- [Date Range Input](https://astryx-vue.pages.dev/en/components/date-range-input.md): DateRangeInput selects a start date and an end date. The value is { start, end } with ISO dates, or null.
- [Date Time Input](https://astryx-vue.pages.dev/en/components/date-time-input.md): DateTimeInput combines a date and a time. The value is YYYY-MM-DDTHH:MM, or null until both parts are set.
- [Field](https://astryx-vue.pages.dev/en/components/field.md): TextInput includes Field. Pass field props directly to TextInput.
- [Field Label](https://astryx-vue.pages.dev/en/components/field-label.md): Standalone label component with optional/required indicators and tooltip support.
- [Field Status](https://astryx-vue.pages.dev/en/components/field-status.md): FieldStatus is the message already used inside Field. Import it on its own when a custom control needs the same error, warning, or success treatment.
- [File Input](https://astryx-vue.pages.dev/en/components/file-input.md): FileInput picks one file, or several. The value is a File, a File[] when isMultiple is set, or null.
- [Input Group](https://astryx-vue.pages.dev/en/components/input-group.md): InputGroup joins a field with a prefix, a suffix, or a button so they read as one control. Use it for a unit, a protocol, or a short action.
- [Input Group Text](https://astryx-vue.pages.dev/en/components/input-group-text.md): A prefix or suffix text element rendered inside InputGroup. Displays text or icons.
- [Multi Selector](https://astryx-vue.pages.dev/en/components/multi-selector.md): MultiSelector picks several values from a fixed list. Without a search field, the trigger is a combobox. The menu is a listbox with aria-multiselectable…
- [Number Input](https://astryx-vue.pages.dev/en/components/number-input.md): NumberInput is a numeric field. People type a number; add hasNumberSteppers when they should also get up and down chevrons. min and max clamp the value, and…
- [Radio](https://astryx-vue.pages.dev/en/components/radio.md): Radio represents a single option. It must be used inside a RadioGroup, which manages selection through provide/inject.
- [Radio Group](https://astryx-vue.pages.dev/en/components/radio-group.md): RadioGroup is a container for mutually exclusive options. It provides name, selected value, and selection handling to child Radio items through provide/inject.
- [Radio List](https://astryx-vue.pages.dev/en/components/radio-list.md): RadioList picks one value. Put a RadioListItem in the default slot, or pass an options array when the rows are plain text.
- [Radio List Item](https://astryx-vue.pages.dev/en/components/radio-list-item.md): Individual radio item with label, description, and content slots.
- [Selector](https://astryx-vue.pages.dev/en/components/selector.md): Selector opens a list when the trigger is clicked. Choosing one option closes the list. It can filter the list, clear the current value, and disable individual…
- [Selector Option](https://astryx-vue.pages.dev/en/components/selector-option.md): Helper component for custom item rendering inside an Selector renderOption prop.
- [Slider](https://astryx-vue.pages.dev/en/components/slider.md): Use Slider to choose a number or numeric range.
- [Switch](https://astryx-vue.pages.dev/en/components/switch.md): Switch toggles a single boolean state.
- [Text Area](https://astryx-vue.pages.dev/en/components/text-area.md): Use TextArea to enter multi-line plain text.
- [Text Input](https://astryx-vue.pages.dev/en/components/text-input.md): TextInput accepts single-line text. The component includes Field.
- [Time Input](https://astryx-vue.pages.dev/en/components/time-input.md): TimeInput edits a time of day. The value is an ISO time, HH:MM or HH:MM:SS, or null.
- [Tokenizer](https://astryx-vue.pages.dev/en/components/tokenizer.md): Tokenizer collects search results into removable tokens. The source matches Typeahead: createStaticSource for local data, or a search function for a remote…
- [Typeahead](https://astryx-vue.pages.dev/en/components/typeahead.md): Typeahead is a single-select search field. The input is a combobox and the menu is a listbox. Use createStaticSource for local data, or implement search for a…
- [Base Typeahead](https://astryx-vue.pages.dev/en/components/base-typeahead.md): Composable combobox engine providing a bare input, search, keyboard navigation, and a styled result dropdown. It renders no input wrapper, border, or…
- [Typeahead Item](https://astryx-vue.pages.dev/en/components/typeahead-item.md): Default dropdown item renderer for typeahead results. Shows label with optional icon, description, and avatar. Exported for use in custom renderItem…
- [Complex Selector](https://astryx-vue.pages.dev/en/components/complex-selector.md): ComplexSelector is a field whose popup content you draw yourself. It owns the label, the trigger, the popover, focus return, and changeAction. The default slot…
- [Power Search](https://astryx-vue.pages.dev/en/components/power-search.md): Power Search splits a query into a field, an operator, and a value. Focusing the input lists the fields. Choosing one opens an editor when the operator still…
- [Checkbox Indicator](https://astryx-vue.pages.dev/en/components/checkbox-indicator.md): Indicators are the selection pictures shared by a checkbox, a radio, a selector, and a Markdown task list. They are decorative. The owning control keeps the…
- [Check Indicator](https://astryx-vue.pages.dev/en/components/check-indicator.md): Indicators are the selection pictures shared by a checkbox, a radio, a selector, and a Markdown task list. They are decorative. The owning control keeps the…
- [Item](https://astryx-vue.pages.dev/en/components/item.md): A single, flexible item primitive that unifies the "start content + label + description + end content" pattern across Astryx. Use it wherever you need a…
- [Radio Indicator](https://astryx-vue.pages.dev/en/components/radio-indicator.md): Indicators are the selection pictures shared by a checkbox, a radio, a selector, and a Markdown task list. They are decorative. The owning control keeps the…
- [Center](https://astryx-vue.pages.dev/en/components/center.md): Center puts its content in a flex container and aligns it to the middle of that box on one axis or on both. It is layout only: it paints nothing, draws no…
- [Divider](https://astryx-vue.pages.dev/en/components/divider.md): Divider separates groups of content with a thin rule. It can carry a centered label.
- [Grid](https://astryx-vue.pages.dev/en/components/grid.md): Grid arranges its children into rows and columns with CSS grid. It solves two-dimensional layout: card galleries, dashboard panels, and any region where…
- [Grid Span](https://astryx-vue.pages.dev/en/components/grid-span.md): Grid item that spans multiple columns or rows.
- [Stack](https://astryx-vue.pages.dev/en/components/stack.md): Import the component from its dedicated entry. The component loads its structural styles.
- [H Stack](https://astryx-vue.pages.dev/en/components/h-stack.md): Stack arranges items in a row or column with consistent spacing. Use the gap prop to control the space between items.
- [V Stack](https://astryx-vue.pages.dev/en/components/v-stack.md): Stack arranges items in a row or column with consistent spacing. Use the gap prop to control the space between items.
- [Stack Item](https://astryx-vue.pages.dev/en/components/stack-item.md): Stack arranges items in a row or column with consistent spacing. Use the gap prop to control the space between items.
- [App Shell](https://astryx-vue.pages.dev/en/components/app-shell.md): AppShell is the page frame. The default slot is the page content. topNav, sideNav, banner, and mobileNav are named slots.
- [Aspect Ratio](https://astryx-vue.pages.dev/en/components/aspect-ratio.md): AspectRatio keeps a fixed width-to-height ratio as its container changes size. Use it for images, video, thumbnails, and other media that should stay in…
- [Form Layout](https://astryx-vue.pages.dev/en/components/form-layout.md): FormLayout arranges fields. It is not a <form>. Put the fields in the default slot and choose a direction.
- [Layout](https://astryx-vue.pages.dev/en/components/layout.md): Layout arranges up to five regions: header, start, content, end, and footer. The default slot is the content. The other regions are named slots. AppShell owns…
- [Layout Panel](https://astryx-vue.pages.dev/en/components/layout-panel.md): Sidebar for navigation, settings, or inspector panels.
- [Layout Footer](https://astryx-vue.pages.dev/en/components/layout-footer.md): Bottom bar for action bars, pagination, and status bars.
- [Layout Header](https://astryx-vue.pages.dev/en/components/layout-header.md): Top bar for page titles, app bars, and toolbars.
- [Layout Content](https://astryx-vue.pages.dev/en/components/layout-content.md): Scrollable main content area.
- [Resize Handle](https://astryx-vue.pages.dev/en/components/resize-handle.md): ResizeHandle is the separator between two regions. useResizable owns the size. Pass sidebar.props to both the handle and the panel.
- [Scrollable Area](https://astryx-vue.pages.dev/en/components/scrollable-area.md): ScrollableArea is a native scroll viewport with an observed content box. It enters the tab order only while a requested axis actually overflows. label is…
- [Section](https://astryx-vue.pages.dev/en/components/section.md): Section groups a region of a page: a settings group, a form section, or a highlighted block. It paints a background, applies padding from the spacing scale…
- [Breadcrumbs](https://astryx-vue.pages.dev/en/components/breadcrumbs.md): Import Breadcrumbs and BreadcrumbItem from their dedicated entry.
- [Breadcrumb Item](https://astryx-vue.pages.dev/en/components/breadcrumb-item.md): BreadcrumbItem represents one destination, action, current location, or sibling-menu trigger inside a Breadcrumbs trail.
- [Mobile Nav](https://astryx-vue.pages.dev/en/components/mobile-nav.md): MobileNav is a dialog drawer that slides in from one side of the screen, not a bottom sheet. Bind MobileNavToggle to the same v-model:is-open. While open…
- [Mobile Nav Toggle](https://astryx-vue.pages.dev/en/components/mobile-nav-toggle.md): The button that opens Mobile Nav on a narrow viewport. It draws the two-line menu glyph, turns it into a close mark while the drawer is open, and keeps…
- [Nav Item](https://astryx-vue.pages.dev/en/components/nav-item.md): NavItem is one row in a sidebar, top bar, or menu. It renders a link when href is set, and a button when it is disabled or has no address. Pass a CSS icon…
- [Nav Icon](https://astryx-vue.pages.dev/en/components/nav-icon.md): NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually…
- [Nav Heading Menu](https://astryx-vue.pages.dev/en/components/nav-heading-menu.md): Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders…
- [Nav Menu](https://astryx-vue.pages.dev/en/components/nav-menu.md): NavMenu is a role="menu". NavMenuItem is one entry and becomes a link when href is set. NavDisclosure owns the trigger, positioning, and dismissal: click…
- [Pagination](https://astryx-vue.pages.dev/en/components/pagination.md): Pagination splits a long list into pages. People move with the page buttons or the previous and next controls.
- [Side Nav](https://astryx-vue.pages.dev/en/components/side-nav.md): SideNav is the navigation landmark along one side of a page. Compose it with SideNavSection, SideNavHeading, and SideNavItem. With collapsible, the bar can…
- [Side Nav Item](https://astryx-vue.pages.dev/en/components/side-nav-item.md): Navigation item with icon, selected state, optional end content, and nesting support via children.
- [Side Nav Heading](https://astryx-vue.pages.dev/en/components/side-nav-heading.md): Product/suite/account heading with smart interaction boundary logic for links and a menu popover.
- [Side Nav Section](https://astryx-vue.pages.dev/en/components/side-nav-section.md): Section grouping with an optional title, subtitle, and end content.
- [Side Nav Collapse Button](https://astryx-vue.pages.dev/en/components/side-nav-collapse-button.md): Toggle button for sidenav collapse. Place inside SideNav (reads context automatically) or outside it (hand the same controlled collapsible config to both)…
- [Tab List](https://astryx-vue.pages.dev/en/components/tab-list.md): Import TabList and Tab from their dedicated entry and control selection with v-model:value.
- [Tab](https://astryx-vue.pages.dev/en/components/tab.md): Individual tab item that renders as a button or an anchor link, with selected-state styling and optional icons.
- [Top Nav](https://astryx-vue.pages.dev/en/components/top-nav.md): TopNav is the navigation landmark across the top of a page. heading, start, the default slot, and center run from the leading edge, and end stays at the…
- [Top Nav Heading](https://astryx-vue.pages.dev/en/components/top-nav-heading.md): Product/suite/account heading for the TopNav heading slot. Supports smart interaction boundary logic: logo, heading text, superheading/subheading with…
- [Top Nav Item](https://astryx-vue.pages.dev/en/components/top-nav-item.md): TopNavItem is a navigation link item for the start slot or the default slot of TopNav: it renders as an anchor with hover and selected states.
- [Top Nav Mega Menu](https://astryx-vue.pages.dev/en/components/top-nav-mega-menu.md): Navigation item that displays a full-width mega menu panel on hover. Uses a slots API with items and featured props. TopNavMegaMenuItem renders itself in both…
- [Top Nav Mega Menu Featured Card](https://astryx-vue.pages.dev/en/components/top-nav-mega-menu-featured-card.md): Standard featured card for the TopNavMegaMenu featured slot. Provides a consistent card with optional image, title, description, and CTA link.
- [Top Nav Mega Menu Item](https://astryx-vue.pages.dev/en/components/top-nav-mega-menu-item.md): An individual item inside an TopNavMegaMenu. Renders itself in both desktop (popover grid) and mobile drawer modes via render mode context.
- [Top Nav Menu](https://astryx-vue.pages.dev/en/components/top-nav-menu.md): TopNavMenu is a navigation item that shows a hover-triggered popover menu. Its entries are rich: each one carries an icon, a title, and an optional description.
- [Stepper](https://astryx-vue.pages.dev/en/components/stepper.md): Stepper lists the steps of a flow. activeStep is the zero-based current step. A step before it is completed, the current step is in progress, and the rest have…
- [Step](https://astryx-vue.pages.dev/en/components/step.md): Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started)…
- [Tab Menu](https://astryx-vue.pages.dev/en/components/tab-menu.md): TabMenu collects tabs that do not fit on the TabList. It has to be a child of TabList. Arrow keys move onto the trigger without changing the selected tab…
- [Outline](https://astryx-vue.pages.dev/en/components/outline.md): Outline is a table of contents. Each item is { id, label, level }. id matches a heading element on the page. level is 1 through 6. Levels 1 and 2 share the…
- [Alert Dialog](https://astryx-vue.pages.dev/en/components/alert-dialog.md): AlertDialog is a modal with a single job: it asks the user to confirm a destructive or irreversible action before that action happens. Deleting content…
- [Bottom Sheet](https://astryx-vue.pages.dev/en/components/bottom-sheet.md): BottomSheet rises from the bottom edge of the viewport to hold mobile-first content: filters, share targets, quick actions, and forms. The panel carries a…
- [Bottom Sheet Switcher](https://astryx-vue.pages.dev/en/components/bottom-sheet-switcher.md): Coordinates a multi-step bottom-sheet flow in one shared dialog; bind v-model:active-sheet to a nested BottomSheet's sheet-id to open or switch steps, and to…
- [Dialog](https://astryx-vue.pages.dev/en/components/dialog.md): Dialog presents one modal task above the page. It uses the native <dialog> element, so it traps focus, locks the page behind a backdrop, and returns focus to…
- [Dialog Header](https://astryx-vue.pages.dev/en/components/dialog-header.md): DialogHeader gives a dialog a labelled title area and an optional close control. It reads context from the parent Dialog: the title becomes the dialog's…
- [Hover Card](https://astryx-vue.pages.dev/en/components/hover-card.md): HoverCard opens a card of richer content when the pointer hovers the trigger or keyboard focus lands on it. It differs from Tooltip in what it carries: a…
- [Overlay](https://astryx-vue.pages.dev/en/components/overlay.md): Overlay lays one piece of content on top of another bounded piece — a photo, a video, a card, any block that owns its own edges — with a scrim between them…
- [Popover](https://astryx-vue.pages.dev/en/components/popover.md): Popover opens a surface next to a trigger button. The surface holds short, interactive content such as a form, a short message, or an action list. The trigger…
- [Toast](https://astryx-vue.pages.dev/en/components/toast.md): Place ToastViewport once near the root of your app, then call useToast from any component.
- [Tooltip](https://astryx-vue.pages.dev/en/components/tooltip.md): Tooltip shows a short hint next to a trigger on hover or keyboard focus. The trigger keeps its own behavior.
- [Command Palette](https://astryx-vue.pages.dev/en/components/command-palette.md): CommandPalette is a searchable command list. It owns the dialog, the search field, grouping, the empty state, and keyboard movement. The commands themselves…
- [Command Palette Item](https://astryx-vue.pages.dev/en/components/command-palette-item.md): Use CommandPaletteItem for one non-interactive result row inside CommandPaletteList or CommandPaletteGroup. CommandPalette owns the composite keyboard model…
- [Command Palette List](https://astryx-vue.pages.dev/en/components/command-palette-list.md): Scrollable results container. Renders as a listbox standalone, and inside CommandPalette while selectable results exist. Contains CommandPaletteItem and…
- [Command Palette Empty](https://astryx-vue.pages.dev/en/components/command-palette-empty.md): Empty state display for the results area. Rendered automatically by CommandPalette for no-results and no-query states.
- [Command Palette Group](https://astryx-vue.pages.dev/en/components/command-palette-group.md): Visual grouping with a heading label. Place inside CommandPaletteList.
- [Command Palette Input](https://astryx-vue.pages.dev/en/components/command-palette-input.md): Use CommandPaletteInput inside CommandPalette for a popup-backed command query, or as an independent search field when no result popup is present.
- [Command Palette Footer](https://astryx-vue.pages.dev/en/components/command-palette-footer.md): CommandPalette renders CommandPaletteFooter automatically. Pass a CommandPaletteFooter to the footer slot only when replacing the default guidance.
- [Lightbox](https://astryx-vue.pages.dev/en/components/lightbox.md): Lightbox opens media in a native <dialog>. Bind isOpen with v-model:is-open. A single media object is one image or video. An array is a gallery: previous…
- [List](https://astryx-vue.pages.dev/en/components/list.md): List presents a collection of related entries, and ListItem is one row inside it. The pair renders a semantic <ul> or <ol> and lays out every row as start…
- [List Item](https://astryx-vue.pages.dev/en/components/list-item.md): List item with label, description, start/end content slots, and interactive patterns.
- [Metadata List](https://astryx-vue.pages.dev/en/components/metadata-list.md): MetadataList lays out label and value pairs. MetadataListItem is one pair. A single column places the label beside the value. Several columns, or a numeric…
- [Metadata List Item](https://astryx-vue.pages.dev/en/components/metadata-list-item.md): A single labeled metadata value within an MetadataList.
- [Overflow List](https://astryx-vue.pages.dev/en/components/overflow-list.md): OverflowList decides how many items fit in the container and moves the rest into a More menu. It collapses from the end by default. collapseFrom="start"…
- [Table](https://astryx-vue.pages.dev/en/components/table.md): Table renders from data and columns. Each column has a key, a header, and an optional width from proportional() or pixel(). A cell shows row[key] unless…
- [Table Body](https://astryx-vue.pages.dev/en/components/table-body.md): TableBody is the <tbody> wrapper for children mode. It holds the data rows. A row must sit inside a section: <table> cannot contain a <tr> directly, because…
- [Table Cell](https://astryx-vue.pages.dev/en/components/table-cell.md): <td> wrapper that reads TableContext to apply density padding, font size, and divider borders when used inside Table.
- [Table Footer](https://astryx-vue.pages.dev/en/components/table-footer.md): <tfoot> wrapper for children mode. Holds summary or total rows beneath the body. A row must sit inside a section: <table> cannot contain a <tr> directly…
- [Table Header](https://astryx-vue.pages.dev/en/components/table-header.md): <thead> wrapper for children mode. Holds the header row, whose cells are TableHeaderCell. A row must sit inside a section: <table> cannot contain a <tr>…
- [Table Header Cell](https://astryx-vue.pages.dev/en/components/table-header-cell.md): <th> wrapper that reads TableContext to apply density padding, semibold weight, secondary text color, and divider borders when used inside Table.
- [Table Row](https://astryx-vue.pages.dev/en/components/table-row.md): <tr> wrapper that reads TableContext to apply striped, hover, and divider styles when used inside Table.
- [Table Selection Toolbar](https://astryx-vue.pages.dev/en/components/table-selection-toolbar.md): TableSelectionToolbar is the bulk-action bar for a table with row selection. useTableSelectionState returns two pieces that go to matching consumers:…
- [Tree List](https://astryx-vue.pages.dev/en/components/tree-list.md): TreeList is a data-driven tree. Each item has an id and a label. children nests the next level. isExpanded is the starting state. A click on a branch toggles…
- [Internationalization Provider](https://astryx-vue.pages.dev/en/components/internationalization-provider.md): Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree…
- [Layer Provider](https://astryx-vue.pages.dev/en/components/layer-provider.md): Layer utilities provide the app-level provider used by overlay systems. Use LayerProvider at the app root for toast/layer configuration; use higher-level…
- [Link Provider](https://astryx-vue.pages.dev/en/components/link-provider.md): Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Vue Router's RouterLink) for client-side routing across all Astryx…
- [Visually Hidden](https://astryx-vue.pages.dev/en/components/visually-hidden.md): When the task moves to the next column, aria-live reads the new place. People who can see the label do not need that sentence.
- [Media Theme](https://astryx-vue.pages.dev/en/components/media-theme.md): MediaTheme is the provider for content on an inverted surface: an image overlay, a scrim, a toast, or a tooltip. It sets data-astryx-media so text, icons, and…
- [Syntax Theme](https://astryx-vue.pages.dev/en/components/syntax-theme.md): SyntaxTheme is the provider for code colors. It sets --astryx-code-syntax- and --astryx-code-block-background for every CodeBlock inside it. useSyntaxTheme()…
- [Theme](https://astryx-vue.pages.dev/en/components/theme.md): Theme is the theme provider. It applies a defineTheme() object to its subtree with CSS variables, and descendants read that theme with useTheme(). There is no…
- [Scrollbars Provider](https://astryx-vue.pages.dev/en/components/scrollbars-provider.md): Wrap your app once, and every scrolling Astryx component swaps the browser's native scrollbar for a custom overlay one. It is thin, takes no layout width…
- [useAnnounce](https://astryx-vue.pages.dev/en/components/use-announce.md): Imperatively announces a message to screen readers through a visually-hidden live region. Use it for state that is only conveyed visually; search result…
- [useAppShellMobile](https://astryx-vue.pages.dev/en/components/use-app-shell-mobile.md): Hook for reading and controlling AppShell mobile navigation state from descendants of AppShell. Use it for custom mobile nav triggers, closing the drawer after…
- [useClickableContainer](https://astryx-vue.pages.dev/en/components/use-clickable-container.md): Makes a container element clickable while preserving nested interactive element behavior. Solves the "nested interactive elements" problem: when a card is…
- [useClipboard](https://astryx-vue.pages.dev/en/components/use-clipboard.md): Copy-to-clipboard behavior: the clipboard write, a transient isCopied flag with its own reset timer, and an optional polite screen-reader announcement…
- [useCollapsible](https://astryx-vue.pages.dev/en/components/use-collapsible.md): Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen +…
- [useCollator](https://astryx-vue.pages.dev/en/components/use-collator.md): Returns the sanctioned locale-aware comparator for custom sorting. The collator is recreated when the provider locale or an option changes.
- [useContainerReveal](https://astryx-vue.pages.dev/en/components/use-container-reveal.md): A headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it when the container is hovered or…
- [useDevWarning](https://astryx-vue.pages.dev/en/components/use-dev-warning.md): Fires a dev-only "Component: message" console warning once per mount while the condition holds. It is the safe way for a component to flag misuse: the same…
- [useEntryAnimation](https://astryx-vue.pages.dev/en/components/use-entry-animation.md): Returns a class for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on…
- [useFocusTrap](https://astryx-vue.pages.dev/en/components/use-focus-trap.md): Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. While the trap is active it listens to keydown on the document and…
- [useGridFocus](https://astryx-vue.pages.dev/en/components/use-grid-focus.md): Manages keyboard navigation within a 2D grid following the WAI-ARIA grid pattern. Supports arrow keys for cell-to-cell navigation, Home/End for row boundaries…
- [useHotkeys](https://astryx-vue.pages.dev/en/components/use-hotkeys.md): Registers global keyboard shortcuts with a single window keydown listener per hook instance. The shortcut list is read from a ref or getter, so updating it…
- [useHoverCard](https://astryx-vue.pages.dev/en/components/use-hover-card.md): Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and…
- [useImageMode](https://astryx-vue.pages.dev/en/components/use-image-mode.md): Detects whether an image is predominantly dark or light by sampling pixels through OffscreenCanvas. Uses APCA perceptual lightness (sRGB linearization plus a…
- [useImperativeAlertDialog](https://astryx-vue.pages.dev/en/components/use-imperative-alert-dialog.md): Hook for showing an alert dialog without managing open state. Call alert.show(options) to open and alert.hide() to close. Render alert.Host once in your…
- [useImperativeDialog](https://astryx-vue.pages.dev/en/components/use-imperative-dialog.md): Hook for showing a dialog without managing open state. Call dialog.show(content, options) to open and dialog.hide() to close. Render dialog.Host once in your…
- [useIndicatorFocusRing](https://astryx-vue.pages.dev/en/components/use-indicator-focus-ring.md): Draws the standard focus ring on the indicator of a control whose real input is visually hidden; a checkbox or radio focuses an opacity-0 input, so the ring…
- [useInputContainer](https://astryx-vue.pages.dev/en/components/use-input-container.md): Makes an input container wrapper clickable, delegating focus to the inner input/textarea when the user clicks non-interactive areas (icons, padding, status…
- [useInputStatusIcon](https://astryx-vue.pages.dev/en/components/use-input-status-icon.md): Builds the on-field status affordance for a bordered input, so every input in the family behaves the same for a given status. The attached variant renders a…
- [useInteractiveRole](https://astryx-vue.pages.dev/en/components/use-interactive-role.md): Resolves what a polymorphic component should render as, in one place: href wins, then a click handler, then inert. Use it in any component that is sometimes a…
- [useKeyboardHint](https://astryx-vue.pages.dev/en/components/use-keyboard-hint.md): Shows an ephemeral "← → to navigate" hint anchored to the focused item the first time a roving-tabindex composite receives keyboard focus. It teaches sighted…
- [useLayer](https://astryx-vue.pages.dev/en/components/use-layer.md): Core positioning hook for rendering overlay content. Use it as the foundation for custom popovers, hover cards, tooltips, and fixed-position layers when the…
- [useListFocus](https://astryx-vue.pages.dev/en/components/use-list-focus.md): Manages keyboard navigation within a linear list following WAI-ARIA menu, listbox, and toolbar patterns. Supports arrow key navigation (vertical, horizontal…
- [useLocale](https://astryx-vue.pages.dev/en/components/use-locale.md): Reads the authoritative Astryx locale. Use it to thread the provider locale into pure formatting helpers and sibling-package APIs; do not derive a second…
- [useLongPress](https://astryx-vue.pages.dev/en/components/use-long-press.md): Detects a single-finger press-and-hold and reports where it happened, so touch users can reach affordances that a pointer gets from right-click. iOS Safari…
- [useMediaQuery](https://astryx-vue.pages.dev/en/components/use-media-query.md): SSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given media query matches. The first value is read during setup…
- [useMenuPress](https://astryx-vue.pages.dev/en/components/use-menu-press.md): The press model of a menu surface, for any pointer. A press that starts on a row is claimed: the highlight follows a held finger as it moves, and the row under…
- [useMergedRefs](https://astryx-vue.pages.dev/en/components/use-merged-refs.md): Combines multiple object or callback refs into one stable callback ref. Use it when a component must forward a consumer ref while also attaching internal refs…
- [useOverflow](https://astryx-vue.pages.dev/en/components/use-overflow.md): Measures children rendered in a hidden container to determine how many fit in the available width without flickering. Uses ResizeObserver to react to container…
- [usePopover](https://astryx-vue.pages.dev/en/components/use-popover.md): Headless hook for click-triggered popovers with focus trapping. Combines useLayer with useFocusTrap, auto-focus, light dismiss, and Escape handling for…
- [usePressFeedback](https://astryx-vue.pages.dev/en/components/use-press-feedback.md): The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS :active paints on the touch itself and…
- [useResizable](https://astryx-vue.pages.dev/en/components/use-resizable.md): Hook for adding drag-to-resize behavior to layout regions. Supports single-region and multi-region configurations with snap points, collapsible panels…
- [useScrollLock](https://astryx-vue.pages.dev/en/components/use-scroll-lock.md): Locks body scroll while isLocked is true, so the page behind a modal or a dialog stays where it is. isLocked is a ref: pass the same flag that opens the…
- [useScrollOverflow](https://astryx-vue.pages.dev/en/components/use-scroll-overflow.md): Tracks scroll overflow state for a horizontally scrollable container. Returns a ref callback and state booleans that update as the user scrolls or the…
- [useScrollableArea](https://astryx-vue.pages.dev/en/components/use-scrollable-area.md): Adds canonical axis-aware scroll behavior to structure owned by the caller. An axis is effective only when its computed overflow is scroll-capable and geometry…
- [useStreamingText](https://astryx-vue.pages.dev/en/components/use-streaming-text.md): Smooths bursty streamed text into a steady character-by-character reveal using requestAnimationFrame. Decouples arrival rate from display rate. Advances on…
- [useTableColumnResize](https://astryx-vue.pages.dev/en/components/use-table-column-resize.md): Hook that returns a TablePlugin adding draggable resize handles to column header borders. Every resizable column gets a handle on its inline end, except the…
- [useTableColumnSettings](https://astryx-vue.pages.dev/en/components/use-table-column-settings.md): Headless column visibility and ordering management for Table. The plugin keeps only the columns whose key is in activeColumnKeys, in that array's order, so one…
- [useTableFilterState](https://astryx-vue.pages.dev/en/components/use-table-filter-state.md): Managed state hook for table filtering. Returns the current filter map, an onChange handler, and a way to clear everything. Pass the map and the handler to…
- [useTableFiltering](https://astryx-vue.pages.dev/en/components/use-table-filtering.md): Table plugin that adds column filters with popover or inline controls. A column gets a filter when its filter names a field in fields. In the inline variant…
- [useTableGroupedRows](https://astryx-vue.pages.dev/en/components/use-table-grouped-rows.md): Hook that groups a flat data array into collapsible section rows. Each distinct groupBy value becomes a full-width section-header row with a chevron toggle…
- [useTablePagination](https://astryx-vue.pages.dev/en/components/use-table-pagination.md): Call useTablePagination with a config object containing page state and callback. Pass the returned plugin to Table via the plugins prop.
- [useTableRowExpansion](https://astryx-vue.pages.dev/en/components/use-table-row-expansion.md): Hook that returns a TablePlugin which expands a full-width detail panel below a row, rendered by the consumer via renderExpanded(item). Adds a leading chevron…
- [useTableRowIndex](https://astryx-vue.pages.dev/en/components/use-table-row-index.md): Hook that returns a TablePlugin which prepends a right-aligned, monospaced row-number column. Numbering follows the rendered data order (reflecting the current…
- [useTableRowStatus](https://astryx-vue.pages.dev/en/components/use-table-row-status.md): Hook that returns a TablePlugin which prepends a narrow column signaling per-row status. Return {status, label} for a semantic success, warning, or error:…
- [useTableSelection](https://astryx-vue.pages.dev/en/components/use-table-selection.md): Hook that returns a TablePlugin implementing row selection with checkboxes, select-all, and aria-selected. The table adds the checkbox column itself. Selection…
- [useTableSelectionState](https://astryx-vue.pages.dev/en/components/use-table-selection-state.md): State management companion for useTableSelection. Returns selectionConfig for the behaviour plugin plus selectionState for selection-aware UI such as…
- [useTableSortable](https://astryx-vue.pages.dev/en/components/use-table-sortable.md): Call useTableSortable with a config object containing sort state and callback. Pass the returned plugin to Table via the plugins prop.
- [useTableStickyColumns](https://astryx-vue.pages.dev/en/components/use-table-sticky-columns.md): Hook that returns a TablePlugin which pins a contiguous run of columns to the start and/or end edge of the table. Pinned columns get cumulative offsets and a…
- [useTableTreeData](https://astryx-vue.pages.dev/en/components/use-table-tree-data.md): Headless tree plugin for Table: renders nested rows with per-level indentation and expand/collapse chevrons in the tree column (the first column by default)…
- [useTableTreeState](https://astryx-vue.pages.dev/en/components/use-table-tree-state.md): State management companion for useTableTreeData. Owns the expanded set (controlled or uncontrolled) and flattens nested data into the visible row array…
- [useTheme](https://astryx-vue.pages.dev/en/components/use-theme.md): Programmatic access to theme tokens for non-CSS consumers like SVG, canvas, Vega, D3, maps, or chart libraries that need values in JavaScript instead of CSS…
- [useToast](https://astryx-vue.pages.dev/en/components/use-toast.md): Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Toasts…
- [useTooltip](https://astryx-vue.pages.dev/en/components/use-tooltip.md): Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use…
- [useTranslator](https://astryx-vue.pages.dev/en/components/use-translator.md): Returns a translator function that resolves keys against the current locale, provider overrides, and the shipped English fallback catalog. Call inside a…
- [useTreeFocus](https://astryx-vue.pages.dev/en/components/use-tree-focus.md): Manages roving-tabindex focus and the WAI-ARIA tree keyboard model. ArrowUp/ArrowDown/Home/End roam linearly over the visible treeitems (skipping disabled…
- [useTypeahead](https://astryx-vue.pages.dev/en/components/use-typeahead.md): Adds APG type-to-focus search to a collection: printable keystrokes are buffered (resetting after a pause), and the first item whose label starts with the…

## Chinese

- [中文文档](https://astryx-vue.pages.dev/llms-zh.txt): 同结构的简体中文版。