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.
Let the user close a banner after reading it. Use for maintenance notices, feature tips, or any non-critical message the user can acknowledge.
A floating banner raised with `elevation="med"`. Banners are inline by default; raise one when it should read as an overlay above content.
A full-width banner with no border radius for page-level notifications. Use at the top of a page for site-wide announcements or maintenance alerts.
All 4 banner statuses: info, success, warning, and error. Use to show persistent messages like updates, confirmations, cautions, or problems at the top of a page or section.
All four status banners stacked: info, success, warning, and error. A quick visual reference for choosing the right status.
Composable combobox engine providing a bare input, search, keyboard navigation, and a styled result dropdown. It renders no input wrapper, border, or selected-value token. Typeahead and Tokenizer compose it for standard fields.
A custom result renderer that adds supporting metadata while BaseTypeahead retains option semantics and keyboard behavior.
BaseTypeahead embedded inside a custom-styled wrapper. The wrapper provides its own border and icon chrome; anchorRef positions the dropdown relative to it. Use this pattern when Typeahead's built-in field layout does not fit your composition.
Open a modal drawer from a single trigger. The scrim dims the page; Escape, a scrim click, or the header close button closes it, and focus returns to the trigger.
Minimal centered credential form on a plain ground: two fields and a submit, nothing competing for attention. The least-chrome entry surface.
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 padding are logical, so they move to the right edge in right-to-left locales.
Blockquote with and without citation. A quick visual reference for the blockquote component.
Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.
A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.
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 flows.
A mobile filter surface that rises from the bottom edge.
Compares hug, capped, and tall starting heights for different amounts of content.
Uses a tall, scrollable form that keeps focused controls visible above the mobile keyboard.
Keeps the page visible and interactive behind a non-modal bottom sheet.
Drag-to-resize stops: a half-height working surface, and a peek that slides away and thins the scrim.
Coordinates a multi-step bottom-sheet flow in one shared dialog; set activeSheet to a nested BottomSheet's sheetId to open or switch steps, and to null to close.
A three-step flow that transitions between content-hugging sheets of different heights, each step in its own native dialog with one scrim handed between them.
A two-step form flow that lets a person review settings, confirm them, or move back, each step in its own native dialog under one scrim.
Individual breadcrumb item that renders as a link when href is provided, or as plain text for the current page.
BreadcrumbItem represents a single step in a breadcrumb trail, supporting links, icons, current-page markers, and custom link components.
Breadcrumb links inside a Breadcrumbs trail. Ancestor pages get an href; mark the last item with isCurrent to render it as plain text for the current page.
Navigation container that renders a <nav> with an ordered list of breadcrumb items.
A breadcrumb trail showing page hierarchy with linked ancestors and a current page.
A 5-level breadcrumb trail for deeply nested content. Use in e-commerce, file browsers, or any UI with several levels of hierarchy.
Add icons before breadcrumb labels for quick recognition. Use a home icon on the root item and contextual icons on key sections.
Give a mid-trail crumb a `menu` prop to turn it into a menu trigger for switching between sibling destinations. It reuses the same item API as DropdownMenu, so an existing option array (or composed item children) drops in verbatim.
Swap the default "/" for a different character like chevrons, arrows, or dots. Use when the visual style of the page calls for a different separator.
Compare the default and supporting variants side by side. Use the supporting variant in dense UIs like admin panels where the breadcrumb should be subtle.
Button triggers an action when clicked. Use it for form submissions, confirmations, navigation, or any interaction that needs a clear call to action.
Buttons with a trailing badge showing a count or status. Use for notification counts, unread messages, or any button that needs a visual indicator.
A floating action button raised with `elevation="med"`. Use elevation for buttons that hover above content, like a FAB.
Groups multiple buttons together with connected styling: shared borders, proper border-radius handling (only on outer edges), and horizontal or vertical orientation.
Astryx showcase: ButtonGroup.
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 unit.
A grouped action bar raised with `elevation="med"`. The connected buttons share one surface, so the shadow lifts them as a unit.
Buttons with a leading icon that reinforces the label. Use when the icon helps the user identify the action faster, like a plus for "New" or a trash can for "Delete".
Small, medium, and large buttons side by side. Use small in dense UIs like toolbars, medium for most cases, and large for prominent CTAs.
All 4 button variants in default, disabled, and loading states. Use primary for the main action, secondary for most others, ghost for low-emphasis, and destructive for dangerous actions.
All four button variants side by side: primary, secondary, ghost, and destructive. A quick visual reference for choosing the right variant.
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 surrounding dates for context.
An interactive single-date calendar with a selected date. Click any day to change the selection.
Limit which dates can be selected using min/max bounds and custom rules like weekdays only. Use for scheduling UIs where certain dates are unavailable.
Pick a start and end date with the range highlighted between them. Use for booking dates, time-off requests, or report filters.