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.
Single-line and multi-line heading truncation with ellipsis for constrained layouts
Component wrapper for hover card display: a richer, larger overlay triggered on hover or focus.
A hover card that shows a user profile preview when hovering over a trigger button. Starts open for preview.
Shows a term definition on hover within a paragraph. Use for technical terms, jargon, or concepts that some readers may not know, like a glossary built into the text.
Shows a page summary when hovering a link: title, description, and URL. Use for documentation links, article references, or any URL where a preview helps the user decide whether to click.
Shows a user profile summary on hover with name, role, and bio. Use on usernames, avatars, or mentions to let users preview a profile without navigating away.
Horizontal stack for arranging items left-to-right. Supports polymorphic rendering.
Demonstrates HStack arranging items horizontally with different gaps and alignments.
Items arranged in a horizontal row with a consistent gap and centered vertical alignment. Use HStack whenever siblings should sit side by side.
Icons are small visual symbols that represent actions, objects, or concepts. They improve scannability and reinforce meaning alongside text. Supports both direct SVG components and semantic icon names that adapt to the active theme.
Astryx showcase: Icon.
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 understood.
An icon button with a wrench icon.
Row of ghost icon buttons for a compact action toolbar
A floating action button (FAB). The most common floating-button shape is icon-only. Raised here with `elevation="high"`.
Icon buttons that show a loading spinner on click for async feedback
Icon buttons with tooltips that explain each action on hover
Non-semantic color palette for icons.
All semantic icon color variants with labels.
All icon sizes from extra-small to large.
Status list using semantic icons for success, warning, error, and info.
Dense multi-pane workspace of resizable, collapsible regions: a hierarchy tree on one flank, tabbed documents in the middle, a docked drawer along the bottom, an inspector opposite. Drag a divider to resize or collapse any of them.
Two-pane message queue: the table indexes a reading pane rather than being the destination, with a divider you drag to resize. Rows stack when the table narrows, not the window; threads read as collapsible messages; replying opens a composer that leaves the list live.
Dense row queue with an inspector: severity-coded rows grouped by status, a saved-search filter bar, a segmented status control, and a resizable detail pane for the selected row. Rows, not cards, sized for scanning volume.
Accordion wizard stacking every step in one column: the active step expands in place while finished ones collapse to a single line carrying their result and a way back in. Steps that run themselves expand into a nested stepper that ticks check by check and halts the column where one fails. Best when later steps depend on what earlier ones decided.
Groups an input with prefix/suffix addons in a visually connected container with shared border and focus ring.
Astryx showcase: InputGroup.
A currency field with static prefix and suffix addons around a TextInput. Use InputGroupText to clarify units or input format.
A prefix or suffix text element rendered inside InputGroup. Displays text or icons.
Wraps your app to set the active locale and (optionally) merge additional translation catalogs + per-locale overrides. Astryx components inside the subtree resolve their strings against this context. If no provider is present, components fall back to the shipped English defaults.
Override a small number of Astryx strings without providing a full locale catalog.
Toggle text direction with the `dir` prop and watch Astryx components mirror. Pagination flips its prev/next chevrons under RTL. The `dir` prop is passed to both `InternationalizationProvider` (so Astryx components pick it up) and the `VStack` (so the DOM subtree mirrors); both channels stay in sync with no extra wrapper.
Load a locale catalog shipped by Astryx and re-render InternationalizationProvider with a new locale to update Astryx strings live.
A universal item primitive that unifies the "start content + label + description + end content" layout pattern. Use as a building block for list items, menu items, contact rows, notifications, and more.
Astryx showcase: Item.
A basic item with a label, supporting description, and end-aligned timestamp. Use this for simple rows that need consistent text alignment and spacing.
Single-row, horizontally scrollable document switcher with compact selected rows, leading file icons, instant reveal-on-hover close actions with reserved geometry, stable separators, and an add control outside the scroll area. Use for editor tabs, workspace tabs, open documents, files, canvases, or panels.
Status rows with an icon, a title, a short description, and end-aligned metadata such as a timestamp or a status badge, here build, memory, and sync events. Use the endContent slot for counts, status, timestamps, and other secondary row information.
Items with leading avatars and icons in the startContent slot. Keep start content small so the row stays compact and easy to scan.
Horizontal lanes of draggable cards where the column itself is the status, so drag and drop between lanes is the state change. Fixed columns, variable-height cards.
Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.
Astryx showcase: Kbd.
Keyboard shortcuts rendered inline within instructional text
Menu-style list pairing action labels with their keyboard shortcuts
Modifier combinations and special keys rendered as shortcut badges
App-level provider for layer systems such as toast viewports and imperative modals. Nested providers pass through.
General five-slot layout primitive for arranging header, start, content, end, and footer regions.
Astryx showcase: Layout.