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.
Comparison table rendered from a markdown string
Markdown with headings, lists, code blocks, tables, blockquotes, and task lists
Provides token overrides for content rendered on inverted surfaces: media overlays, scrims, toasts, and tooltips. The base behavior flips color-scheme so all light-dark() tokens resolve to the correct side. Only a small set of tokens need explicit overrides beyond that. Themes can further customize component appearance on media surfaces via onDark/onLight in defineTheme(), with both token overrides (e.g. "--color-accent": "#90CAF9") and component overrides (e.g. ghost buttons get a border on dark surfaces).
A common image card pattern: place text and actions over a dark gradient and wrap the overlay content in MediaTheme mode="dark".
A light scrim over an image. Use MediaTheme mode="light" so text and ghost buttons use dark-on-light tokens.
A compact media overlay showing MediaTheme adapting text, icons, badges, and button variants over an image-backed dark surface.
Four-column nested navigation narrowing left to right (team workspace, channel list, message stream, thread panel) where each column scopes the next. Dense rows, zero cards.
Container for metadata items with column layout, orientation, and collapse support.
Astryx showcase: MetadataList.
Single-column key-value metadata list.
Metadata list with a show-more toggle after a set number of items.
Horizontal metadata items for compact inline display.
A single labeled metadata value within an MetadataList.
Metadata list items displaying labeled values in various formats including text, badges, and links.
A titled section of label and value rows for one record, here a deployment's environment, health status badge, version, and last deploy date. Values take plain text or a component such as a Badge.
Multi-column metadata grid with token tags.
Masonry grid of variable-height tiles that pack against each other instead of cropping to a shared ratio, captioned per tile. Irregular rhythm, unlike the uniform gallery.
A slide-out drawer for mobile navigation. Accepts SideNav children.
Astryx showcase: MobileNav.
Mobile navigation drawer with sectioned nav items triggered by a menu button
Navigation drawer that slides in from the right side of the screen
Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. Renders nothing above the mobile breakpoint.
Demonstrates MobileNavToggle as a standalone hamburger button for opening the mobile navigation drawer.
A nav toggle with a custom icon and accessible label instead of the default hamburger. It opens a MobileNav drawer via the AppShell mobile context, which AppShell provides automatically.
Mobile navigation drawer without a title header
The default modal drawer dims the page, traps focus, and closes on a scrim click. With hasScrim={false}, the drawer has no scrim or focus trap and leaves the page interactive.
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 headers, or toolbars.
A basic three-dot menu with simple action items.
A visible overflow trigger that opens actions in a BottomSheet. Use this presentation for short action sets on compact touch surfaces.
Basic three-dot overflow menu with simple text-only action items.
A three-dot menu with a divider separating destructive actions from safe ones.
A three-dot menu with actions organized into labeled groups.
Multi-select dropdown with checkboxes for choosing multiple items.
Astryx showcase: MultiSelector.
Keeps a multi-selection list open in a bottom sheet while choices are toggled.
Column visibility toggle with hidden label, search, select-all, and selection count.
Two multi-selectors in a form with required/optional states.
Borderless MultiSelector variant composed with ghost buttons in a toolbar.
Multi-select with search filtering and select-all.
Multi-select with options grouped into labeled sections.
Accessible menu container and items for nav heading popovers. NavHeadingMenu provides role="menu" with keyboard navigation; NavHeadingMenuItem renders individual selectable items. Pass as the menu prop of SideNavHeading or TopNavHeading.
NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or application.
Circular icon containers for navigation headers with accent backgrounds.
Circular icon containers wrapping semantic icons. Use as logos or accent icons in navigation headers such as TopNavHeading.
A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.
A number input for quantity entry.
Number input with a clear button, unit suffix, and min/max constraint
Number input with min/max boundaries and a helper description