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.
Always-on analytics with a triage rail: status-colored tiles with sparklines, multi-series time charts over a switchable window, and an independently scrolling alert column that folds into the content when narrow.
Preferences inside a modal container with searchable section navigation, so configuration happens without leaving whatever is underneath. Grouped toggles, live preview of appearance choices, rebindable shortcuts.
Preferences as one continuously scrolling form, sections stacked in order with no navigation between them. The simplest settings shape: everything reachable by scrolling.
Preferences split into nav-switched panels: a persistent section list swaps the pane beside it, and rows edit in place rather than opening a separate form.
Application frame combining both navigation axes: a top menu bar with command-palette search over a resizable hierarchy rail, wrapping placeholder content. For when one axis is not enough.
Asymmetric split section: a copy column of headline, supporting text, and links held against a clustered image collage opposite. Deliberately off-balance, unlike the centered hero.
Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible and resizable modes.
Astryx showcase: SideNav.
Application frame with a single collapsible, resizable left rail carrying grouped history and search, wrapping the main content. Vertical navigation only, no top bar.
Toggle button for sidenav collapse. Place inside SideNav (reads context automatically) or outside it (hand the same controlled collapsible config to both). Renders as an icon-only ghost button by default.
Demonstrates SideNavCollapseButton inside a collapsible SideNav.
Place a collapse button in the SideNav footer to let users toggle the rail between expanded and collapsed states. Disable the built-in button via collapsible={{hasButton: false}} when positioning it yourself.
Side navigation items with badges, counts, and context menus as trailing content.
Side navigation with an account switcher dropdown in the header for multi-account apps.
Product/suite/account heading with smart interaction boundary logic for links and a menu popover.
Demonstrates SideNavHeading with an app name, logo icon, superheading, and subheading.
A SideNav header with an app icon and a linked title. Pass it to the SideNav header prop to identify the product or workspace at the top of the navigation rail.
Navigation item with icon, selected state, optional end content, and nesting support via children.
Demonstrates SideNavItem with selected, icon, disabled, and nested states.
Navigation links inside a SideNav, each with a label, an icon, and an href. Mark the item for the current page with isSelected.
Side navigation with collapsible nested items for settings or hierarchical menus.
Section grouping with an optional title, subtitle, and end content.
Demonstrates SideNavSection with titled groups of navigation items.
Group related SideNavItems under titled sections. Use sections to organize longer navigation lists into scannable clusters like Overview and Account.
Flat row collection where columns sort, rows select into a bulk-action toolbar, and each row carries an overflow menu. Sortable but ungrouped, with no detail pane, the baseline shape.
An animated shimmer placeholder that previews the shape of content while it loads. Use it to build loading screens that match the layout of the real content. For content with unknown dimensions, use Spinner instead.
A skeleton loading placeholder.
Card skeleton with avatar, name, and content lines.
Staggered skeleton lines with varying widths.
Table skeleton with staggered column widths.
Set side="start" to open from the inline start edge: left in LTR and right in RTL. The default end edge follows the inspector convention.
A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.
A slider control set to 50%.
Slider with custom formatting showing temperature in Fahrenheit.
Range slider for selecting a value range like price bounds.
Sliders with error, warning, and success validation states.
Slider with labeled tick marks at fixed intervals.
An animated loading indicator for processes with unknown duration, such as data fetching or form submission. Supports visible labels, multiple sizes, and a dark background variant. For content with known dimensions, use Skeleton instead.
A large spinner indicator.
Default and onMedia shade spinners for light and dark backgrounds.
All spinner sizes displayed side by side.
Spinners with text and rich multi-line labels.
Unified stack layout component with a direction prop. Use direction="horizontal" for left-to-right flow or direction="vertical" (default) for top-to-bottom. For convenience, HStack and VStack are pre-configured wrappers.
Buttons positioned at the start, center, and end of a row.
Badges arranged horizontally and vertically in side-by-side cards.
An avatar, text, and button in a row; the text stretches to fill the available space.
Stack item for controlling individual item behavior within a stack. Supports polymorphic rendering.
StackItem can be used within HStack or VStack for more granular control over individual item sizing and alignment, but is optional; stack children work without it.