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 card layout with header, scrollable content area, and footer with action buttons.
Scrollable main content area.
LayoutContent is the scrollable main content area within a Layout, providing automatic padding and scroll containment between the header and footer.
A scrollable main content area below a fixed header. Use LayoutContent inside Layout to get automatic padding and scroll containment for the primary content.
A minimal layout with just a content area inside a card, without header or footer.
A layout using contentWidth to constrain and center content while keeping dividers full-bleed.
A file browser style layout with start panel for folders, main content for files, and end panel for details.
Bottom bar for action bars, pagination, and status bars.
LayoutFooter is a fixed footer slot within a Layout, pinned to the bottom for persistent actions like form buttons or navigation.
A fixed footer with end-aligned action buttons below scrollable content. Use LayoutFooter inside Layout for persistent actions like Save and Cancel.
A layout where content extends edge-to-edge with zero padding, ideal for tables or images.
Top bar for page titles, app bars, and toolbars.
LayoutHeader is a fixed header slot within a Layout, pinned to the top for titles, navigation, and action buttons.
A fixed page header with a title and a primary action, above scrollable content. Use LayoutHeader inside Layout for persistent page-level headers.
Sidebar for navigation, settings, or inspector panels.
LayoutPanel is a sidebar slot within a Layout, used for navigation, detail views, or secondary content alongside the main content area.
A fixed-width side panel holding a navigation list next to the main content. Use LayoutPanel in the start or end slot of Layout for sidebars.
A settings page layout with a navigation sidebar panel, content area, header, and footer.
A fullscreen overlay for viewing images and videos at full resolution. Supports single-item and gallery modes with prev/next navigation, optional zoom and pan for images, and native video controls.
A fullscreen image viewer with caption.
A thumbnail grid that opens a fullscreen gallery. Clicking any thumbnail opens the lightbox at that index. Prev/next navigation lets users browse all images without closing.
Opens a video in the lightbox. Native browser controls are available. Zoom and pan are disabled for video items.
A lightbox with zoom and pan enabled. Double-click the image to zoom in; drag to pan around. Double-click again or use the close button to exit.
Styled anchor link with variants, external link support, and polymorphic rendering.
A standalone link.
A vertical list of external links that open in a new tab with an indicator icon.
A link embedded within a paragraph of body text.
Wraps your app to replace the default <a> tag with a framework-specific link component (e.g. Next.js Link) for client-side routing across all Astryx components.
Routes every Astryx link through a custom component that intercepts the click, the hook frameworks like Next.js use for client-side navigation. Click the link to see the custom handler fire instead of a full-page load.
Horizontal row of standalone links with descriptive hover tooltips.
List container with density, dividers, and header support.
Astryx showcase: List.
Simple list with labels and descriptions for settings-style layouts.
Bulleted list of feature highlights using disc markers.
List item with label, description, start/end content slots, and interactive patterns.
List items with icons, descriptions, and end content slots demonstrating the full ListItem API.
Basic list items with labels and descriptions. Use this structure for settings, navigation summaries, and other simple collections.
List items with leading avatars and icons. Use startContent for compact visual identifiers that help users scan the collection.
List items with end-aligned metadata. Use endContent for badges, counts, timestamps, and compact status details.
Chat-style message list with avatars, preview text, and unread badges.
Numbered step-by-step instructions using decimal list markers.
Credential form inside an elevated centered card, third-party provider buttons separated from the fields by a divider, secondary sign-up and legal links beneath.
Credential form filling one half of a two-pane split, full-bleed media holding the other. Same fields as the card variant, but the layout carries brand imagery.
Progressive credential flow that branches on input: the email domain resolves an identity provider and redirects, with a password path as fallback. Two-stage rather than one form.
Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks, and citations with consistent styling.
Rich markdown content with headings, lists, and formatting.
Markdown with citation chips linked to external sources
Compact markdown styled for AI responses with shifted heading levels