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.
Several sections open at once, for comparing across them — feature lists, pricing tiers. One Collapsible per Card, so each trigger keeps its own large type: it is the heading of its surface, not a row in a list.
Only one section open at a time, so a single body of content competes for attention. Use defaultValue to pre-expand whichever section a first-time reader needs. Each Collapsible owns a Section, so its trigger is that section heading.
Several tables on one page, each in a collapsible card with its own columns — for groups that do not share a schema, where one table would stand full of empty cells. One time range drives them all, and rows expand into a history chart. Accounts, integrations, sections, sort, expand, or collapse.
A flat list on the page background with hand-placed Dividers, for detail panels and sidebars where cards would add too much weight. Rows, so the triggers step down to body-semibold and a supporting metadata line sits under each answer.
Root component. Manages open state, search, keyboard navigation, and composition slots.
Basic command palette with static items and keyboard navigation.
Server-side search with loading spinner and custom empty states.
Command palette with a custom footer tip message.
Empty state display for the results area. Rendered automatically by CommandPalette for no-results and no-query states.
Command palette empty state shown when no commands are available.
A command palette with no results, showing a custom empty message via emptyBootstrapText. Use to explain why the palette is empty and what the user can do next.
Footer with keyboard guidance. CommandPalette renders the default arrow, Enter, and Escape hints automatically.
Command palette footer with custom tip content.
A command palette footer with no children, rendering the built-in keyboard navigation hints. Use CommandPaletteFooter without content to get the default arrow-key, Enter, and Esc hints below the results list.
Visual grouping with a heading label. Place inside CommandPaletteList.
Command palette groups in both data-driven (auxiliaryData.group) and composed (CommandPaletteGroup + CommandPaletteItem) forms.
Command palette items organized under group headings using the composed CommandPaletteGroup form. Use to separate related commands into labeled sections.
Command palette with items grouped via auxiliaryData.group.
Search input slot. Auto-focuses on mount. Wires to command palette context when used inside CommandPalette.
Command palette search input with a custom placeholder and a keyboard shortcut hint in the endContent slot.
Custom placeholder and a keyboard shortcut badge in the trailing slot via endContent.
One option in a command palette result list. CommandPalette context supplies selection, highlight, identity, and close behavior.
Command palette items with custom content via renderItem and as composed CommandPaletteItem with icons, highlighted, selected, and disabled states.
Selectable command palette items inside a CommandPaletteList, including highlighted and disabled states. Use when composing a palette manually instead of a search source.
Scrollable results container. Renders as a listbox standalone, and inside CommandPalette while selectable results exist. Contains CommandPaletteItem and CommandPaletteGroup children.
Scrollable command palette list with grouped items, including a highlighted item, composed without a full CommandPalette.
Flat list showing the highlighted, selected, and disabled item states. Use CommandPaletteGroup to add section headings.
Single-value picker with persistent selection and check indicator.
Custom item rendering with icons, keyboard shortcuts, and keyword search.
Transposed matrix that puts candidates in the columns and criteria in grouped rows, with a pinned label column that survives horizontal scroll, columns you can swap or add, and best-in-row marks you can toggle. Compare, comparison, matrix, spec sheet, feature grid, pricing table, benchmark, frozen column, sticky column, or side-by-side.
An input or toolbar trigger and dialog-popover shell for custom selector content.
A two-axis picker: choose a fruit and a ripeness level from one control. ComplexSelector owns the trigger, popover, and focus restore while the custom grid owns its keyboard semantics.
A multi-step deadline field: pick a preset like Today or Next week, or switch to a custom date and time before applying. The popup stays open until the user commits, so the content owns the Apply action.
A destination picker that combines a search field with a TreeList hierarchy. TreeList owns tree keyboard navigation; ComplexSelector owns the trigger, popover, and focus restore. Selecting a folder closes the popup.
Flat single-column form mixing control types (text, pill toggles, dropdowns, long free-text) landing on one full-width submit. No steps, no branching, no summary rail.
A context menu that appears on right-click at the cursor position. Wraps trigger content as children.
An adaptive context area that supports long-press on compact touch screens and right-click elsewhere.
An adaptive context area: long-press opens a BottomSheet on compact touch screens, while right-click opens a cursor-positioned menu elsewhere.
A ContextMenu using the explicit BottomSheet presentation. Long-press the target on touch devices or right-click it with a pointer. Keep a visible menu trigger for important mobile actions.
Menu item component for compound mode. Re-exported from DropdownMenuItem for discoverability.
Context menu with custom-rendered items using ContextMenuItem for icons and descriptions.
Context menu items with labels and secondary descriptions. Use ContextMenuItem to render custom menu entries with consistent styling.
Comparison-heavy analytics behind a persistent filter bar: tiles that each carry an inline sparkline and several period-over-period deltas, then segmented breakdowns underneath. Every number is shown against another number.
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 calendar date.
A date input field with a calendar popover. Type a date or click the calendar icon to pick one.
Date input with a clear button that resets the value. Use when the date field is optional and the user may need to undo their selection.
Date input with helper text below the label explaining what the field expects. Use when the purpose of the date is not obvious from the label alone.
The format prop reuses Timestamp's format vocabulary to control how the committed value is displayed: date, date_long (default), date_weekday, and system_date, or a function for a fully custom string. Formatting applies only to the committed value, never to text the user is actively typing.