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.
Number inputs showing error, warning, and success validation states
Number input with a percentage unit suffix and valid range
Single-record detail in two columns: a summary header with status and actions, a repeating line-item list, a totals block that sums it, and a chronological activity timeline in the rail. The shape for any record holding children plus a history: a customer order with shipping, an invoice, a transaction, or a job.
Document outline navigation with sliding indicator track. Renders a flat heading list as anchor links with a density variant and scroll-spy active state when uncontrolled.
A document outline with the active section highlighted by the sliding indicator track.
Drive the active section yourself with activeId and onActiveIdChange. Providing activeId disables the built-in scroll-spy so your own logic owns the highlight.
Heading levels 1 through 4 map to progressively deeper indentation, so a long document with sub-sections stays scannable.
Two density variants control item padding. Use compact for dense sidebars and default for standard documentation layouts. The sliding indicator automatically matches each item height.
A horizontal list that automatically hides items when they exceed the available width. Use OverflowList for breadcrumbs, toolbars, tag lists, or any row that needs to collapse gracefully at smaller sizes.
A list of buttons that collapses overflowing items into a +N indicator.
Resizable row of badges that collapses into a count badge on overflow
maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown
Overflow list that hides items from the start, keeping the latest visible
Action toolbar that collapses overflow buttons into a dropdown menu
Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge
Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior.
A media card with an always-visible scrim and centered action content.
Places compact supporting content in a bottom scrim strip without covering the entire image.
Reveals an overlay action on hover or keyboard focus. Use when actions should stay visually quiet until the media receives attention.
Three-pane authoring workspace: a source palette on one flank, a live canvas in the middle, and an inspector that retargets to whatever is selected. Drag and drop to reorder, edit to see it render immediately.
Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a variant to match the context: numbered pages for data tables, a count for large lists, compact for tight spaces, or dots for carousels.
A review carousel using dot pagination to step through testimonial cards. Use the dots variant for carousels, galleries, and any paged content where the total is small and visible position matters more than a page number.
A transactions table with pagination and a page size dropdown at the bottom. Shows how pagination works as a footer below real content, with adjustable rows per page.
All four display variants stacked: dots, compact, count, and pages. A quick visual reference for choosing the right variant.
Pagination below a data table with client-side page slicing. Use the count variant with small size for dense data views where users need to see item ranges.
A click-triggered popover for displaying interactive content anchored to a trigger element.
Astryx showcase: Popover.
Opt-in BottomSheet alternative for compact touch surfaces where actions should use a modal presentation anchored to the bottom edge.
Inline confirmation popover for destructive actions with delete and cancel buttons.
Popover with checkbox filters and apply/reset actions.
Popover displaying a list of keyboard shortcuts with key and description pairs.
Popover with toggle switches for managing user preferences like notifications, dark mode, and sounds.
Analytics for a value-over-time question: balance and change tiles above a stacked area chart of composition through time, closing on a ranked table of the largest contributors.
PowerSearch is a structured filter bar where each token represents a field, operator, and value. Use it for complex multi-dimensional filtering when users need to combine multiple search criteria. For simple single-field search, use a text input instead.
Token-based filter bar with enum and text fields, pre-populated with sample filters.
Power search with contentSearchFieldKey so free-text input maps to a title field automatically.
Power search with multiple field types: enum, multi-select, entity, and text filters.
Power search initialized with pre-set filter tokens for status and priority.
Composition of PowerSearch with Table using usePowerSearchConfig to auto-generate config and filter data.
Single-item detail pairing a media gallery with a selection column: variant swatches, a quantity stepper, primary and secondary commit actions, and collapsible specification sections below.
Uniform card grid where every tile carries media, title, supporting line, and a price. Browse-to-select only, with no filtering and no detail surface.
A horizontal bar showing the completion progress of a task. Use it for operations where the duration is known, or as an animated indicator when progress can't be calculated. Supports semantic color variants, value labels, and custom formatting.
A progress bar filled to 60%.
Progress bar with a custom value label showing disk usage in GB.
Indeterminate progress bar for operations with unknown duration.
All semantic color variants stacked vertically.
Progress bar with its current percentage displayed.
Status analytics mixing progress and time-axis shapes: a completion donut, a horizontal timeline of dated bars against a today marker, a per-owner table with progress and status, an at-risk list, and a burndown.