---
name: "@astryx"
slug: "astryx"
description: "Meta's open source design system: accessible React components, hooks, examples, and page templates. Components install as re-exports of the Astryx package; examples and pages copy editable source."
category: "Forms"
tags: ["accessibility", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "marketing", "media", "mobile", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "facebook"
website: "https://astryx.atmeta.com"
github: "https://github.com/facebook/astryx"
registry: "https://astryx.atmeta.com/shadcn/registry.json"
pro: false
pro_url: null
github_stars: 13762
component_count: 250
generated_at: "2026-10-27T06:34:08.542Z"
---

# @astryx

Meta's open source design system: accessible React components, hooks, examples, and page templates. Components install as re-exports of the Astryx package; examples and pages copy editable source.

## Links

- Website: https://astryx.atmeta.com
- GitHub: https://github.com/facebook/astryx
- Registry JSON: https://astryx.atmeta.com/shadcn/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/astryx
- This file: https://sh4dcn.netlify.app/md/astryx.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://astryx.atmeta.com/shadcn/registry.json
pnpm dlx shadcn@latest add https://astryx.atmeta.com/shadcn/registry.json
bunx shadcn@latest add https://astryx.atmeta.com/shadcn/registry.json
# clone the source repo
git clone https://github.com/facebook/astryx.git
# fetch the raw registry index
curl -s https://astryx.atmeta.com/shadcn/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| component-alert-dialog | registry:component | A modal dialog that asks the user to confirm a destructive action. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-alert-dialog.json` |
| component-app-shell | registry:component | AppShell is the page shell for an application. It provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-app-shell.json` |
| component-aspect-ratio | registry:component | Maintains a fixed width-to-height ratio for its children as its container resizes. Use it for media containers like videos, images, thumbnails, or any content … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-aspect-ratio.json` |
| component-avatar | registry:component | Displays a user avatar with image, initials fallback, and optional status indicator. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-avatar.json` |
| component-avatar-group | registry:component | Stacked avatar display with overlapping layout and optional overflow indicator. Children are Avatar elements. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-avatar-group.json` |
| component-avatar-group-overflow | registry:component | Overflow indicator for AvatarGroup. Shows a compact count for hidden avatars and can render custom count text or act as a button. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-avatar-group-overflow.json` |
| component-avatar-status-dot | registry:component | Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (fill… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-avatar-status-dot.json` |
| component-badge | registry:component | Badge highlights a status or category at a glance. Use it sparingly: only when a value represents a distinct state (Active, Failed) or a grouping tag (Engineer… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-badge.json` |
| component-banner | registry:component | Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that t… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-banner.json` |
| component-base-typeahead | registry:component | Composable combobox engine providing a bare input, search, keyboard navigation, and a styled result dropdown. It renders no input wrapper, border, or selected-… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-base-typeahead.json` |
| component-blockquote | registry:component | A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and paddi… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-blockquote.json` |
| component-bottom-sheet | registry:component | A mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport; use BottomSheetSwitcher for multi-step f… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-bottom-sheet.json` |
| component-bottom-sheet-switcher | registry:component | Coordinates a multi-step bottom-sheet flow, one native dialog per sheet; set activeSheet to a nested BottomSheet's sheetId to open or switch steps, and to null… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-bottom-sheet-switcher.json` |
| component-breadcrumb-item | registry:component | Individual breadcrumb item that renders as a link when href is provided, or as plain text for the current page. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-breadcrumb-item.json` |
| component-breadcrumbs | registry:component | Navigation container that renders a <nav> with an ordered list of breadcrumb items. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-breadcrumbs.json` |
| component-button | registry:component | Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-button.json` |
| component-button-group | registry:component | Groups multiple buttons together with connected styling: shared borders, proper border-radius handling (only on outer edges), and horizontal or vertical orient… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-button-group.json` |
| component-calendar | registry:component | Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see su… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-calendar.json` |
| component-card | registry:component | Card is a bordered, elevated container for discrete, self-contained items: things you could reorder, remove, or interact with independently. Cards are NOT the … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-card.json` |
| component-carousel | registry:component | Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-carousel.json` |
| component-center | registry:component | Center aligns content to the middle of its container. Use it for empty states, loading screens, login forms, or any content that should sit in the center of th… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-center.json` |
| component-chat-composer | registry:component | Layout shell for a chat composer. Arranges named slots (drawer, header, input, footer, send) with page-radius container, elevation, a keyboard-only editor focu… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-composer.json` |
| component-chat-composer-drawer | registry:component | Collapsible drawer panel that sits above the chat input inside ChatComposer. Pass it to the composer's `drawer` slot to show attachments, context chips, or any… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-composer-drawer.json` |
| component-chat-composer-input | registry:component | Rich text input for the chat composer. Supports trigger menus (type @ or / to open a typeahead), inline tokens rendered as badges, message history recall with … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-composer-input.json` |
| component-chat-composer-token-element | registry:component | 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 toke… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-composer-token-element.json` |
| component-chat-dictation-button | registry:component | ChatDictationButton is a toggle button that starts and stops voice dictation inside a chat composer. It pairs with useChatDictation to show a microphone icon w… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-dictation-button.json` |
| component-chat-layout | registry:component | Layout shell for full chat interfaces. Messages flow in normal page flow, composer is fixed to the bottom with a frosted glass dock. Set density (compact/balan… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-layout.json` |
| component-chat-layout-scroll-button | registry:component | 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 l… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-layout-scroll-button.json` |
| component-chat-message | registry:component | Sender context wrapper: handles avatar, name, metadata, and alignment based on sender role. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-message.json` |
| component-chat-message-bubble | registry:component | Styled content container for the chat "bubble." Reads sender from parent ChatMessage context to auto-style the background. Use filled for standard messages and… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-message-bubble.json` |
| component-chat-message-list | registry:component | Presentational message container with density context and infinite scroll support. Provides role="log" with aria-live="polite" for accessibility. A flex spacer… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-message-list.json` |
| component-chat-message-metadata | registry:component | Composable metadata row for chat messages. Renders timestamp, footer content, and delivery status in a single row. Direction reverses for user sender. Omits th… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-message-metadata.json` |
| component-chat-send-button | registry:component | Circular send/stop toggle button for the chat composer. Place it inside ChatComposer where it reads context automatically: no wiring needed. When streaming sta… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-send-button.json` |
| component-chat-system-message | registry:component | Centered system message for non-sender content like date separators, membership changes, and status notices. It is not a chat bubble; it has no avatar, no alig… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-system-message.json` |
| component-chat-tokenized-text | registry:component | Renders a text string with token patterns replaced by inline token content. Wrap any message body inside ChatMessageBubble to turn raw @mentions, #tags, or /co… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-tokenized-text.json` |
| component-chat-tool-calls | registry:component | 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… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-chat-tool-calls.json` |
| component-check-indicator | registry:component | The mark on a chosen option: a checkmark by default, and nothing at all when unchosen, so a listbox shows no empty box beside every row. This is the indicator … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-check-indicator.json` |
| component-checkbox-indicator | registry:component | The checkbox visual: a square box with a checkmark or an indeterminate bar. Decorative (aria-hidden); the owning control keeps the input, role, accessible name… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-checkbox-indicator.json` |
| component-checkbox-input | registry:component | CheckboxInput toggles a single on/off value. Use it for settings like "Enable notifications", terms acceptance, or opt-in choices. For multiple checkboxes in a… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-checkbox-input.json` |
| component-checkbox-list | registry:component | Checkbox group container with field integration for label, description, and status. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-checkbox-list.json` |
| component-checkbox-list-item | registry:component | Individual checkbox item with label, description, and end content slot. Works in collection mode (inside a CheckboxList with a value array) or standalone mode … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-checkbox-list-item.json` |
| component-citation | registry:component | Citations display inline references to external sources. Use them to attribute information within AI-generated responses, articles, or anywhere provenance and … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-citation.json` |
| component-clickable-card | registry:component | An interactive card for navigation or action targets. Nested interactive elements work independently. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-clickable-card.json` |
| component-code | registry:component | Code marks short inline references such as function names, variables, file paths, and command-line flags. Use CodeBlock for standalone or multi-line snippets. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-code.json` |
| component-code-block | registry:component | Fenced code block with syntax highlighting. Use for multi-line code snippets. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-code-block.json` |
| component-collapsible | registry:component | A primitive that makes any content collapsible: a trigger button toggles visibility of the content area, managing its own state or deferring to a parent Collap… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-collapsible.json` |
| component-collapsible-group | registry:component | Coordinates multiple Collapsible instances so only one (single mode) or any number (multiple mode) can be open at a time. Renders no wrapper DOM element unless… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-collapsible-group.json` |
| component-command-palette | registry:component | Root component. Manages open state, search, keyboard navigation, and composition slots. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette.json` |
| component-command-palette-empty | registry:component | Empty state display for the results area. Rendered automatically by CommandPalette for no-results and no-query states. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-empty.json` |
| component-command-palette-footer | registry:component | Footer with keyboard guidance. CommandPalette renders the default arrow, Enter, and Escape hints automatically. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-footer.json` |
| component-command-palette-group | registry:component | Visual grouping with a heading label. Place inside CommandPaletteList. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-group.json` |
| component-command-palette-input | registry:component | Search input slot. Auto-focuses on mount. Wires to command palette context when used inside CommandPalette. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-input.json` |
| component-command-palette-item | registry:component | One option in a command palette result list. CommandPalette context supplies selection, highlight, identity, and close behavior. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-item.json` |
| component-command-palette-list | registry:component | Scrollable results container. Renders as a listbox standalone, and inside CommandPalette while selectable results exist. Contains CommandPaletteItem and Comman… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-command-palette-list.json` |
| component-complex-selector | registry:component | An input or toolbar trigger and dialog-popover shell for custom selector content. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-complex-selector.json` |
| component-context-menu | registry:component | A context menu that appears on right-click at the cursor position. Wraps trigger content as children. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-context-menu.json` |
| component-context-menu-item | registry:component | Menu item component for compound mode. Re-exported from DropdownMenuItem for discoverability. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-context-menu-item.json` |
| component-date-input | registry:component | DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific c… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-date-input.json` |
| component-date-range-input | registry:component | DateRangeInput lets users select a start and end date from a dual-month calendar popover. Use it for filtering data by time period, report generation, analytic… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-date-range-input.json` |
| component-date-time-input | registry:component | DateTimeInput combines date and time selection in one field. With presentation="adaptive-native" (the default), mouse/trackpad devices use Astryx typed fields … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-date-time-input.json` |
| component-dialog | registry:component | Modal dialog using the native <dialog> element. Modal and inline content starts with theme body text defaults. Ancestor surface/group membership ends as a whol… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dialog.json` |
| component-dialog-header | registry:component | Header for dialogs with a title, optional subtitle, close button, and start/end content slots. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dialog-header.json` |
| component-divider | registry:component | A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive r… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-divider.json` |
| component-drawer | registry:component | A side panel that floats above page content for inspectors and detail views: the "click a table row, see its details" pattern. Unlike a docked panel it overlay… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-drawer.json` |
| component-drawer-header | registry:component | Header for drawers with a title, optional subtitle, close button, and start/end content slots. Same API as DialogHeader. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-drawer-header.json` |
| component-dropdown-menu | registry:component | Action menu with a trigger button and anchored, bottom-sheet, or adaptive presentation. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu.json` |
| component-dropdown-menu-checkbox-item | registry:component | A checkable menu item (role="menuitemcheckbox") that toggles an independent boolean. Use for on/off options inside a DropdownMenu; for a one-of-N choice use Dr… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-checkbox-item.json` |
| component-dropdown-menu-divider | registry:component | 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 equival… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-divider.json` |
| component-dropdown-menu-group | registry:component | A group of rows in a compound menu. A visible title names role="group" through aria-labelledby; an omitted title leaves the group unnamed. The heading is not a… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-group.json` |
| component-dropdown-menu-item | registry:component | One action or destination row in the pointer presentation of DropdownMenu. The parent menu owns keyboard navigation; the row owns activation, disabled state, d… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-item.json` |
| component-dropdown-menu-radio-group | registry:component | A controlled, named single-select group of DropdownMenuRadioItem children (role="group" of menuitemradio). Owns value propagation, close policy, root compositi… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-radio-group.json` |
| component-dropdown-menu-radio-item | registry:component | A single option in a DropdownMenuRadioGroup (role="menuitemradio"). Must be used inside a DropdownMenuRadioGroup. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-radio-item.json` |
| component-dropdown-menu-sub-menu | registry:component | A single menu row that reveals a nested flyout of its own items. The row adopts DropdownMenuItem semantics (label / icon / description / isDisabled); its child… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-dropdown-menu-sub-menu.json` |
| component-empty-state | registry:component | EmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search results, first-time setups, or cleared inboxes. Always incl… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-empty-state.json` |
| component-field | registry:component | Low-level form field wrapper for custom controls that need a label, description, and optional/required indicators. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-field.json` |
| component-field-label | registry:component | Standalone label group for one control or a caller-labelled group, with optional supporting text, optionality indicators, icon, and tooltip. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-field-label.json` |
| component-field-status | registry:component | FieldStatus renders validation feedback for fields and field-like controls. Use it directly for custom controls that need the same error, warning, or success p… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-field-status.json` |
| component-file-input | registry:component | FileInput provides file upload with optional drag-and-drop support. Use it for single or multiple file selection with built-in validation for file type, size, … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-file-input.json` |
| component-form-layout | registry:component | A layout container that arranges form fields with consistent spacing and direction. FormLayout handles where fields go, not state or submission. Wrap it in a <… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-form-layout.json` |
| component-grid | registry:component | Grid container with fixed or responsive columns; `{minWidth, max}` reflows, a number never does. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-grid.json` |
| component-grid-span | registry:component | Grid item that spans multiple columns or rows. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-grid-span.json` |
| component-h-stack | registry:component | Horizontal stack for arranging items left-to-right. Supports polymorphic rendering. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-h-stack.json` |
| component-heading | registry:component | Semantic heading component that renders h1-h6 elements with themed styling, themed sizing via type scale tokens, and line-clamp truncation. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-heading.json` |
| component-hover-card | registry:component | Component wrapper for hover card display: a richer, larger overlay triggered on hover or focus. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-hover-card.json` |
| component-icon | registry:component | Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both dire… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-icon.json` |
| component-icon-button | registry:component | A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-icon-button.json` |
| component-input-group | registry:component | Groups an input with prefix/suffix addons in a visually connected container with shared border and focus ring. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-input-group.json` |
| component-input-group-text | registry:component | A prefix or suffix text element rendered inside InputGroup. Displays text or icons. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-input-group-text.json` |
| component-internationalization-provider | registry:component | Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree res… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-internationalization-provider.json` |
| component-item | registry:component | A universal item primitive that unifies the "start content + label + description + end content" layout pattern. Use as a building block for list items, menu it… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-item.json` |
| component-kbd | registry:component | Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-kbd.json` |
| component-layer-provider | registry:component | App-level provider for layer systems such as toast viewports and imperative modals. Nested providers pass through. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layer-provider.json` |
| component-layout | registry:component | General five-slot layout primitive for arranging header, start, content, end, and footer regions. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layout.json` |
| component-layout-content | registry:component | Scrollable main content area. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layout-content.json` |
| component-layout-footer | registry:component | Bottom bar for action bars, pagination, and status bars. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layout-footer.json` |
| component-layout-header | registry:component | Top bar for page titles, app bars, and toolbars. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layout-header.json` |
| component-layout-panel | registry:component | Sidebar for navigation, settings, or inspector panels. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-layout-panel.json` |
| component-lightbox | registry:component | A fullscreen overlay for viewing images and videos at full resolution. Supports single-item and gallery modes with prev/next navigation, optional zoom and pan … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-lightbox.json` |
| component-link | registry:component | Styled anchor link with variants, external link support, and polymorphic rendering. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-link.json` |
| component-link-provider | registry:component | Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-link-provider.json` |
| component-list | registry:component | List container with density, dividers, and header support. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-list.json` |
| component-list-item | registry:component | List item with label, description, start/end content slots, and interactive patterns. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-list-item.json` |
| component-markdown | registry:component | Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, ta… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-markdown.json` |
| component-media-theme | registry:component | Provides token overrides for content rendered on inverted surfaces: media overlays, scrims, toasts, and tooltips. The base behavior flips color-scheme so all l… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-media-theme.json` |
| component-metadata-list | registry:component | Container for metadata items with column layout, orientation, and collapse support. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-metadata-list.json` |
| component-metadata-list-item | registry:component | A single labeled metadata value within an MetadataList. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-metadata-list-item.json` |
| component-mobile-nav | registry:component | A slide-out drawer for mobile navigation. Accepts SideNav children. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-mobile-nav.json` |
| component-mobile-nav-toggle | registry:component | Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. R… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-mobile-nav-toggle.json` |
| component-more-menu | registry:component | MoreMenu is a three-dot button that opens a list of actions. Use it for secondary actions that don't need to be always visible, like in table rows, card header… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-more-menu.json` |
| component-multi-selector | registry:component | Multi-select dropdown with checkboxes for choosing multiple items. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-multi-selector.json` |
| component-nav-heading-menu | registry:component | Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individu… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-nav-heading-menu.json` |
| component-nav-icon | registry:component | NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identi… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-nav-icon.json` |
| component-number-input | registry:component | A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, an… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-number-input.json` |
| component-outline | registry:component | Document outline navigation with sliding indicator track. Renders a flat heading list as anchor links with a density variant and scroll-spy active state when u… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-outline.json` |
| component-overflow-list | registry:component | A horizontal list that automatically hides items when they exceed the available width. Use OverflowList for breadcrumbs, toolbars, tag lists, or any row that n… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-overflow-list.json` |
| component-overlay | registry:component | Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-overlay.json` |
| component-pagination | registry:component | Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-pagination.json` |
| component-popover | registry:component | A click-triggered popover for displaying interactive content anchored to a trigger element. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-popover.json` |
| component-power-search | registry:component | PowerSearch is a structured filter bar where each token represents a field, operator, and value. Use it for complex multi-dimensional filtering when users need… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-power-search.json` |
| component-progress-bar | registry:component | A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-progress-bar.json` |
| component-radio-indicator | registry:component | The radio visual: a circle with a filled inner dot when selected. Draws in both states; an unselected radio is an empty circle, which is what lets it stand in … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-radio-indicator.json` |
| component-radio-list | registry:component | Radio group container with field integration for label, description, and status. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-radio-list.json` |
| component-radio-list-item | registry:component | Individual radio item with label, description, and content slots. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-radio-list-item.json` |
| component-resize-handle | registry:component | Draggable separator between panels. Pill-grip design: invisible at rest, visible on hover (0.6 opacity), fully opaque during drag (1.0). Keyboard-accessible. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-resize-handle.json` |
| component-richtext-rich-text-editor | registry:component | A WYSIWYG rich-text editor built on Lexical, styled with Astryx design tokens. Its field container shares TextArea input visuals for the resting border, hover … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-richtext-rich-text-editor.json` |
| component-scrollable-area | registry:component | Provides a native scroll viewport and a real observed content box. The viewport enters the tab order only while a requested logical axis is effectively scrolla… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-scrollable-area.json` |
| component-section | registry:component | Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time yo… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-section.json` |
| component-segmented-control | registry:component | Container wrapper providing context (value, onChange, size, isDisabled) to SegmentedControlItem children. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-segmented-control.json` |
| component-segmented-control-item | registry:component | Individual segment item rendering as a radio button within the segmented control. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-segmented-control-item.json` |
| component-selectable-card | registry:component | A card that toggles between selected and unselected states with an accent border. For navigation use ClickableCard. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-selectable-card.json` |
| component-selector | registry:component | Dropdown selector for choosing from a list of options. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-selector.json` |
| component-selector-option | registry:component | Helper component for custom item rendering inside an Selector renderOption prop. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-selector-option.json` |
| component-side-nav | registry:component | Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible and resizable modes. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-side-nav.json` |
| component-side-nav-collapse-button | registry:component | Toggle button for sidenav collapse. Place inside SideNav (reads context automatically) or outside it (hand the same controlled collapsible config to both). Ren… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-side-nav-collapse-button.json` |
| component-side-nav-heading | registry:component | Product/suite/account heading with smart interaction boundary logic for links and a menu popover. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-side-nav-heading.json` |
| component-side-nav-item | registry:component | Navigation item with icon, selected state, optional end content, and nesting support via children. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-side-nav-item.json` |
| component-side-nav-section | registry:component | Section grouping with an optional title, subtitle, and end content. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-side-nav-section.json` |
| component-skeleton | registry:component | An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. F… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-skeleton.json` |
| component-slider | registry:component | A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formattin… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-slider.json` |
| component-spinner | registry:component | An animated loading indicator for processes with unknown duration, such as data fetching or form submission. Supports visible labels, multiple sizes, and a dar… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-spinner.json` |
| component-stack | registry:component | Unified stack layout component with a direction prop. Use direction="horizontal" for left-to-right flow or direction="vertical" (default) for top-to-bottom. Fo… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-stack.json` |
| component-stack-item | registry:component | Stack item for controlling individual item behavior within a stack. Supports polymorphic rendering. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-stack-item.json` |
| component-status-dot | registry:component | A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-status-dot.json` |
| component-step | registry:component | Individual step within a Stepper. Renders a progress-bar segment, an indicator, and a label with optional description. Progress (completed/active/not-started) … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-step.json` |
| component-stepper | registry:component | Container component that manages step state and renders steps in horizontal or vertical orientation as an ordered list. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-stepper.json` |
| component-switch | registry:component | A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferen… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-switch.json` |
| component-syntax-theme | registry:component | Applies syntax highlighting colors to CodeBlock and any code component in the subtree. By default, code components use the theme-level syntax colors (set via d… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-syntax-theme.json` |
| component-tab | registry:component | Individual tab item that renders as a button or an anchor link, with selected-state styling and optional icons. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tab.json` |
| component-tab-list | registry:component | Tab strip that provides TabListContext (value, onChange, size) to Tab and TabMenu children; a nav landmark, or the WAI-ARIA tabs pattern where role="tablist" a… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tab-list.json` |
| component-tab-menu | registry:component | Overflow menu trigger that opens a dropdown of additional tab options, showing the selected option's label as the trigger text. Host attributes and DOM event h… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tab-menu.json` |
| component-table | registry:component | Styled, data-driven table with density, dividers, hover highlight, striped rows, and named plugin support. T must extend Record<string, unknown>. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table.json` |
| component-table-body | registry:component | <tbody> wrapper for children mode. Holds the data rows. A row must sit inside a section: <table> cannot contain a <tr> directly, because the HTML parser insert… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-body.json` |
| component-table-cell | registry:component | <td> wrapper that reads TableContext to apply density padding, font size, and divider borders when used inside Table. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-cell.json` |
| component-table-footer | registry:component | <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, becau… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-footer.json` |
| component-table-header | registry:component | <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> direct… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-header.json` |
| component-table-header-cell | registry:component | <th> wrapper that reads TableContext to apply density padding, semibold weight, secondary text color, and divider borders when used inside Table. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-header-cell.json` |
| component-table-row | registry:component | <tr> wrapper that reads TableContext to apply striped, hover, and divider styles when used inside Table. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-row.json` |
| component-table-selection-toolbar | registry:component | Selection-aware bulk-action surface built on Toolbar. Pass selectionState from useTableSelectionState so count, visibility, and complete clearing stay synchron… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-table-selection-toolbar.json` |
| component-text | registry:component | Semantic body text component that renders text with type-based styling from the theme, with optional truncation, decoration, and layout props. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-text.json` |
| component-text-area | registry:component | TextArea is a multi-line text input for collecting longer-form content like comments, descriptions, or messages. Use it when the expected input spans multiple … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-text-area.json` |
| component-text-input | registry:component | TextInput collects short-form text like names, emails, or search queries. Use it for single-line values where the expected input is brief. Pair it with validat… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-text-input.json` |
| component-theme | registry:component | Wraps a subtree with a specific Astryx theme. For static production themes, use `astryx theme build` and import the generated CSS plus built theme object for f… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-theme.json` |
| component-thumbnail | registry:component | Thumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while uploading, the image on success, and a placeholder icon wh… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-thumbnail.json` |
| component-time-input | registry:component | TimeInput uses a browser/OS time picker on coarse pointers by default and Astryx's typed field on fine pointers. It converts values to a standard format and su… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-time-input.json` |
| component-timer | registry:component | Displays a standardized elapsed duration for active work without scheduling a React render on every tick. Elapsed format updates by second below one hour and b… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-timer.json` |
| component-timestamp | registry:component | Timestamp formats a date or time value into human-readable text. Use it to show when something was created, updated, or is scheduled; picking relative for rece… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-timestamp.json` |
| component-toast | registry:component | Toast shows a brief, non-blocking notification to confirm an action or present temporary information. Use it for scenarios where the user needs feedback but no… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-toast.json` |
| component-toggle-button | registry:component | A button that toggles between pressed and unpressed states. Thin wrapper over Button with controlled toggle pattern, icon swap, and font weight emphasis. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-toggle-button.json` |
| component-toggle-button-group | registry:component | Groups toggle buttons for exclusive (single) or multi-select behavior. Uses discriminated union on type for type-safe value/onChange. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-toggle-button-group.json` |
| component-token | registry:component | Token is a small, inline element for representing discrete pieces of associated data, like tags, categories, or selections. Use it to label content, show activ… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-token.json` |
| component-tokenizer | registry:component | Tokenizer is a multi-select input that lets users search, select, and manage multiple items displayed as removable chips. Use it when users need to build a set… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tokenizer.json` |
| component-toolbar | registry:component | General-purpose toolbar container with three content slots and roving tabindex. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-toolbar.json` |
| component-tooltip | registry:component | Component wrapper for tooltip display triggered on hover or focus. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tooltip.json` |
| component-top-nav | registry:component | Main navigation bar container with slot-based layout. Children are accepted as an alias for startContent. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav.json` |
| component-top-nav-heading | registry:component | Product/suite/account heading for the TopNav heading slot. Supports smart interaction boundary logic: logo, heading text, superheading/subheading with independ… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-heading.json` |
| component-top-nav-item | registry:component | Navigation link item for use in TopNav startContent: renders as an anchor with hover and selected states. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-item.json` |
| component-top-nav-mega-menu | registry:component | 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 … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-mega-menu.json` |
| component-top-nav-mega-menu-featured-card | registry:component | Standard featured card for the TopNavMegaMenu featured slot. Provides a consistent card with optional image, title, description, and CTA link. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-mega-menu-featured-card.json` |
| component-top-nav-mega-menu-item | registry:component | An individual item inside an TopNavMegaMenu. Renders itself in both desktop (popover grid) and mobile drawer modes via render mode context. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-mega-menu-item.json` |
| component-top-nav-menu | registry:component | Navigation item that displays a hover-triggered popover menu with rich items containing an icon, title, and optional description. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-top-nav-menu.json` |
| component-tree-list | registry:component | Tree list container. Accepts items data and rendering configuration. Expansion state is managed internally. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-tree-list.json` |
| component-typeahead | registry:component | Styled typeahead with label, description, validation, and all field features. Wraps BaseTypeahead with Field for the primary use case. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-typeahead.json` |
| component-typeahead-item | registry:component | Default dropdown item renderer for typeahead results. Shows label with optional icon, description, and avatar. Exported for use in custom renderItem implementa… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-typeahead-item.json` |
| component-v-stack | registry:component | Vertical stack for arranging items top-to-bottom. Supports polymorphic rendering. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-v-stack.json` |
| component-visually-hidden | registry:component | Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplem… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-visually-hidden.json` |
| hook-use-announce | registry:hook | Imperatively announces a message to screen readers through a visually-hidden live region. Use it for state that is only conveyed visually; search result counts… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-announce.json` |
| hook-use-app-shell-mobile | registry:hook | Hook for reading and controlling AppShell mobile navigation state from descendants of AppShell. Use it for custom mobile nav triggers, closing the drawer after… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-app-shell-mobile.json` |
| hook-use-clickable-container | registry:hook | Makes a container element clickable while preserving nested interactive element behavior. Solves the "nested interactive elements" problem: when a card is clic… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-clickable-container.json` |
| hook-use-clipboard | registry:hook | Copy-to-clipboard behavior: the clipboard write, a transient isCopied flag with its own reset timer, and an optional polite screen-reader announcement. Extract… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-clipboard.json` |
| hook-use-collapsible | registry:hook | Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside CollapsibleGroup), controlled (isOpen + onOpenCha… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-collapsible.json` |
| hook-use-collator | registry:hook | Returns the sanctioned locale-aware comparator for custom sorting. The collator is recreated when the provider locale or an option changes. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-collator.json` |
| hook-use-combobox | registry:hook | Tracks the active option of a single-select combobox and handles its keys, while DOM focus stays on the control. It powers Selector and CommandPalette; use it … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-combobox.json` |
| hook-use-container-reveal | registry:hook | 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 recei… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-container-reveal.json` |
| hook-use-dev-warning | registry:hook | Fires a dev-only "Component: message" console warning once per mount while the condition holds. It is the render-safe way for a component to flag misuse: warni… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-dev-warning.json` |
| hook-use-entry-animation | registry:hook | Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendere… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-entry-animation.json` |
| hook-use-focus-trap | registry:hook | Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to focus events on the document and redirects focus back into … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-focus-trap.json` |
| hook-use-grid-focus | registry:hook | 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,… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-grid-focus.json` |
| hook-use-hotkeys | registry:hook | Registers global keyboard shortcuts with a single window keydown listener per hook instance. Handlers live in a ref, so re-renders never re-subscribe. Skips ev… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-hotkeys.json` |
| hook-use-hover-card | registry:hook | Headless hook for hover-triggered floating cards. Builds on useLayer with hover/focus intent detection, configurable delays, safe hover behavior, and accessibl… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-hover-card.json` |
| hook-use-image-mode | registry:hook | Detects whether an image is predominantly dark or light by sampling pixels via OffscreenCanvas. Uses APCA perceptual lightness (sRGB linearization + power curv… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-image-mode.json` |
| hook-use-imperative-alert-dialog | registry:hook | Hook for showing an alert dialog without managing open state. Call alert.show(options) to open and alert.hide() to close. Render alert.element in your JSX tree. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-imperative-alert-dialog.json` |
| hook-use-imperative-dialog | registry:hook | Hook for showing a dialog without managing open state. Call dialog.show(content, options) to open and dialog.hide() to close. Render dialog.element in your JSX… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-imperative-dialog.json` |
| hook-use-indicator-focus-ring | registry:hook | 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 ha… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-indicator-focus-ring.json` |
| hook-use-input-container | registry:hook | Makes an input container wrapper clickable, delegating focus to the inner input/textarea when the user clicks non-interactive areas (icons, padding, status ind… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-input-container.json` |
| hook-use-input-status-icon | registry:hook | Builds the on-field status affordance for a bordered input and its accessibility wiring, so every input in the family behaves the same for a given status. The … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-input-status-icon.json` |
| hook-use-interactive-role | registry:hook | Resolves what a polymorphic component should render as, in one place: href wins, then onClick, then an interactive trigger context supplied by a parent (Popove… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-interactive-role.json` |
| hook-use-keyboard-hint | registry:hook | Shows an ephemeral "← → to navigate" hint anchored to the focused item the first time a roving-tabindex composite (Toolbar, TabList, SegmentedControl, etc.) re… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-keyboard-hint.json` |
| hook-use-layer | registry:hook | Core positioning hook for rendering overlay content using CSS Anchor Positioning and the Popover API. Use it as the foundation for custom popovers, hover cards… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-layer.json` |
| hook-use-list-focus | registry:hook | Manages keyboard navigation within a linear list following WAI-ARIA menu/listbox/toolbar patterns. Supports arrow key navigation (vertical, horizontal, or both… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-list-focus.json` |
| hook-use-locale | registry:hook | 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 local… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-locale.json` |
| hook-use-long-press | registry:hook | 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 nev… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-long-press.json` |
| hook-use-media-query | registry:hook | SSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given media query matches. Always returns false on first render for… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-media-query.json` |
| hook-use-menu-press | registry:hook | The press model of macOS and iOS menus, for any pointer: the row under the pointer when it is RELEASED is the row that acts, the highlight follows the pointer … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-menu-press.json` |
| hook-use-merged-refs | registry:hook | 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.… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-merged-refs.json` |
| hook-use-multi-combobox | registry:hook | Tracks the active option of a multi-select combobox and handles its keys, while DOM focus stays on the control. It powers MultiSelector; unlike useCombobox, to… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-multi-combobox.json` |
| hook-use-overflow | registry:hook | Measures children rendered in a hidden container to determine how many fit in the available width without flickering. Uses ResizeObserver to react to container… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-overflow.json` |
| hook-use-popover | registry:hook | Headless hook for click-triggered popovers with focus trapping. Combines useLayer with useFocusTrap, auto-focus, light dismiss, Escape handling, and an optiona… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-popover.json` |
| hook-use-press-feedback | registry:hook | 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 an… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-press-feedback.json` |
| hook-use-resizable | registry:hook | Hook for adding drag-to-resize behavior to layout regions. Supports single-region and multi-region configurations with snap points, collapsible panels, localSt… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-resizable.json` |
| hook-use-scroll-lock | registry:hook | Locks body scroll when active by pinning the body with position: fixed. This prevents background scrolling behind modals and dialogs, which is necessary for iO… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-scroll-lock.json` |
| hook-use-scroll-overflow | registry:hook | Tracks scroll overflow state for a horizontally scrollable container. Returns a ref callback and state booleans that update as the user scrolls or the containe… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-scroll-overflow.json` |
| hook-use-scrollable-area | registry:hook | 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… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-scrollable-area.json` |
| hook-use-streaming-text | registry:hook | Smooths bursty streamed text into a steady character-by-character reveal using requestAnimationFrame. Decouples arrival rate from display rate. Advances on wor… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-streaming-text.json` |
| hook-use-table-column-resize | registry:hook | Hook that returns a TablePlugin adding draggable resize handles to column header borders. Supports pointer + keyboard (WAI-ARIA window splitter) resizing, RTL,… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-column-resize.json` |
| hook-use-table-column-settings | registry:hook | Headless column visibility and ordering management for Table. Provides filtered columns, toggle helpers, and pre-built MultiSelector options for a column picke… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-column-settings.json` |
| hook-use-table-filter-state | registry:hook | Managed state hook for table filtering. Returns the current filter map and an onChange handler. Pass the result directly to useTableFiltering. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-filter-state.json` |
| hook-use-table-filtering | registry:hook | Table plugin that adds inline column filters with popover or inline controls. Pairs with useTableFilterState for managed state. Supports text, select, multi-se… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-filtering.json` |
| hook-use-table-grouped-rows | registry:hook | 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, th… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-grouped-rows.json` |
| hook-use-table-pagination | registry:hook | Headless pagination plugin for Table. Call with a config object: `useTablePagination({ page, onPageChange, totalItems })`. Returns a TablePlugin to pass to `<T… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-pagination.json` |
| hook-use-table-row-expansion | registry:hook | 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 … | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-row-expansion.json` |
| hook-use-table-row-index | registry:hook | Hook that returns a TablePlugin which prepends a right-aligned, monospaced row-number column. Numbering follows the rendered data order (reflecting the current… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-row-index.json` |
| hook-use-table-row-status | registry:hook | Hook that returns a TablePlugin which prepends a narrow column signaling per-row status. Return {status, label} for a semantic success, warning, or error: Tabl… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-row-status.json` |
| hook-use-table-selection | registry:hook | Hook that returns a TablePlugin implementing row selection with checkboxes, select-all, and aria-selected. Uses React Context for independent checkbox re-rende… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-selection.json` |
| hook-use-table-selection-state | registry:hook | State management companion for useTableSelection. Returns selectionConfig for the behaviour plugin plus selectionState for selection-aware UI such as TableSele… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-selection-state.json` |
| hook-use-table-sortable | registry:hook | Headless multi-sort plugin for Table. Call with a config object: `useTableSortable({ sort, onSortChange })`. Returns a TablePlugin to pass to `<Table plugins={… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-sortable.json` |
| hook-use-table-sticky-columns | registry:hook | 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 s… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-sticky-columns.json` |
| hook-use-table-tree-data | registry:hook | 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), a… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-tree-data.json` |
| hook-use-table-tree-state | registry:hook | State management companion for useTableTreeData. Owns the expanded set (controlled or uncontrolled) and flattens nested data into the visible row array; collap… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-table-tree-state.json` |
| hook-use-theme | registry:hook | 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 cu… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-theme.json` |
| hook-use-toast | registry:hook | Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Works auto… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-toast.json` |
| hook-use-tooltip | registry:hook | Headless hook for hover/focus-triggered tooltips. Builds on useLayer with hover intent, keyboard focus handling, and accessible aria-describedby linking. Use f… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-tooltip.json` |
| hook-use-translator | registry:hook | Returns a translator function that resolves keys against the current locale, provider overrides, and the shipped English fallback catalog. Call inside a compon… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-translator.json` |
| hook-use-tree-focus | registry:hook | Manages roving-tabindex focus and the WAI-ARIA tree keyboard model. ArrowUp/ArrowDown/Home/End roam linearly over the visible treeitems (skipping disabled ones… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-tree-focus.json` |
| hook-use-typeahead | registry:hook | 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 buff… | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/hook-use-typeahead.json` |
| example-alert-dialog-loading | registry:block | A confirmation dialog that shows a spinner while the action runs. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-alert-dialog-loading.json` |
| example-app-shell-content-only | registry:block | Minimal shell with no navigation, useful for full-bleed pages, auth screens, or embedded views. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-app-shell-content-only.json` |
| example-app-shell-side-nav-only | registry:block | App shell with SideNav header providing app identity, no TopNav needed. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-app-shell-side-nav-only.json` |
| example-app-shell-top-nav-only | registry:block | Simple layout with TopNav and no side navigation, suitable for landing pages. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-app-shell-top-nav-only.json` |
| example-app-shell-top-nav-with-side-nav | registry:block | The most common layout with TopNav for app identity and SideNav for page-level navigation. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-app-shell-top-nav-with-side-nav.json` |
| example-app-shell-with-banner | registry:block | Full layout with TopNav, SideNav, and a dismissable info banner between the nav and content. | `npx shadcn@latest add https://astryx.atmeta.com/shadcn/example-app-shell-with-banner.json` |

## For AI agents

```text
You are adding components from @astryx to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/astryx.md) for the component list.
2. Fetch the machine-readable index: https://astryx.atmeta.com/shadcn/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: astryx).
```