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.
A tokenizer with preset tags and search source.
Tokenizer with a built-in clear-all button for bulk removal of all selected tokens.
Free-text tokenizer for creating custom tags and a combined create-or-search pattern. Use when users need to enter values that may not exist in a predefined list.
Tokenizer with an action button in the end slot. Use for inline actions like applying selections alongside the input.
Tokenizer with a leading search icon to visually reinforce the search behavior.
Tokenizer with a maximum selection limit. The input hides automatically when the limit is reached, preventing further additions.
Tokenizer with overflow truncation when unfocused. Inline mode pushes content down on expand; layer mode overlays without shifting layout.
Tokenizer in disabled, error, warning, and success states. Use to communicate validation feedback or lock a selection from editing.
Tokens with a dismiss button for selections the user can undo. Use in multi-select fields, active filters, or any list of user-chosen items.
General-purpose toolbar container with three content slots and roving tabindex.
A compact toolbar with the muted variant for showing bulk selection actions. Use when the user selects multiple items in a list or table and needs quick access to batch operations.
A toolbar as a card header with a left-aligned title and icon actions on the right. Use Toolbar instead of LayoutHeader when your card header has interactive actions; Toolbar adds start/end slot layout, keyboard navigation, and automatic size cascading. If the header is just a title with no actions, a LayoutHeader or Section is enough.
Small, medium, and large toolbars side by side. The size prop cascades to child buttons and inputs automatically. Use small in dense UIs like cards, medium for most cases, and large for spacious layouts.
Filter bar above a table: a search box leads the row, each field beside it is a closed trigger that doubles as its own filter chip — the bare field name unset, the whole clause once set — and the clauses fold from the end into a count as the row narrows, followed by a live result count, a clear all, and a column picker. Use to search, filter, and narrow flat rows of records such as jobs, orders, tickets, or users.
A toolbar with tabs in the start slot and an action button at the end. Use as a card or section header when content is split into tabs with a primary action alongside.
A toolbar with start, center, and end content using the three-column grid layout. Use when you need a centered title or heading with navigation and actions on either side.
Component wrapper for tooltip display triggered on hover or focus.
Astryx showcase: Tooltip.
Tooltips on an action button bar with contextual descriptions.
Tooltip using the useTooltip hook for programmatic control.
Tooltips on inline text terms for definitions.
Main navigation bar container with slot-based layout. Children are accepted as an alias for startContent.
Astryx showcase: TopNav.
Application frame with horizontal navigation only: a centered bar whose items open full-width mega-menu panels, over placeholder content that keeps the entire width.
Navigation layout with center-aligned nav items flanked by a logo heading and end actions.
Full-featured navigation bar with icon-labeled nav items, search, notifications, and a primary CTA.
Product/suite/account heading for the TopNav heading slot. Supports smart interaction boundary logic: logo, heading text, superheading/subheading with independent links, and an optional menu popover with automatic chevron indicator.
Demonstrates TopNavHeading with a logo and text, both as a plain display and as a clickable link.
A product heading with a logo inside a TopNav, linked to the home page. Use as the leading brand element of a top navigation bar.
Navigation bar with a hover-triggered dropdown menu showing product items with icons and descriptions.
Navigation link item for use in TopNav startContent: renders as an anchor with hover and selected states.
Demonstrates TopNavItem with selected, icon, disabled, and default states.
Navigation links inside a TopNav with one item marked as selected. Use for top-level pages of an application.
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 desktop and mobile drawer modes. Supports inline collapsible drawer via render mode context.
Demonstrates TopNavMegaMenu with items and a featured card in the mega menu panel.
Marketing-style navigation with a full-width mega menu featuring product items and a promotional featured card.
A mega menu trigger inside a TopNav that opens a panel of rich link items. Use when a navigation section has multiple destinations worth describing.
Standard featured card for the TopNavMegaMenu featured slot. Provides a consistent card with optional image, title, description, and CTA link.
Demonstrates TopNavMegaMenuFeaturedCard with a title, description, and CTA link inside a mega menu.
A promotional card with a title, description, and call-to-action link. Pass it to the featured slot of a TopNavMegaMenu to highlight announcements.
An individual item inside an TopNavMegaMenu. Renders itself in both desktop (popover grid) and mobile drawer modes via render mode context.
Demonstrates TopNavMegaMenuItem with icons, titles, and descriptions inside a mega menu.
Rich link items with an icon, title, and description. Use inside the items slot of a TopNavMegaMenu to describe each destination.
Navigation item that displays a hover-triggered popover menu with rich items containing an icon, title, and optional description.
Demonstrates TopNavMenu with a hover-triggered dropdown containing items with icons and descriptions.
A dropdown menu inside a TopNav built from an items array with icons and descriptions. Use to group related destinations under a single trigger.
Navigation bar with multiple hover-triggered dropdown menus that auto-close when switching between them.
Navigation bar with a branded logo icon, heading link, nav items, and a profile action.