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.
Transcript of alternating turns carrying mixed rich content inline (markdown, code blocks, collapsible tool-call output) beside a resizable artifact panel that holds generated output while the stream keeps scrolling.
Zero-state entry surface centered on a single composer with suggestion chips instead of history, sized for the moment before any content exists. The empty counterpart to a transcript.
A modal dialog that asks the user to confirm a destructive action.
A delete button that asks the user to confirm before deleting.
A confirmation dialog that shows a spinner while the action runs.
Three-band analytics: a row of headline tiles, then charts, then supporting tables, all re-reading from one global filter bar. Breadth over depth, a summary surface rather than a drill-down.
AppShell is the page shell for an application. It provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles responsive mobile navigation and skip-to-content automatically. Configure side nav collapse on SideNav with its collapsible prop.
A basic app shell with content padding.
Minimal shell with no navigation, useful for full-bleed pages, auth screens, or embedded views.
App shell with SideNav header providing app identity, no TopNav needed.
Simple layout with TopNav and no side navigation, suitable for landing pages.
The most common layout with TopNav for app identity and SideNav for page-level navigation.
Full layout with TopNav, SideNav, and a dismissable info banner between the nav and content.
Maintains a fixed width-to-height ratio for its children as its container resizes. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. It takes its width from the container and derives its height from the ratio, so it needs an ancestor with a definite width.
Three aspect ratio containers at equal height (1:1, 4:3, and 16:9), each showing an image with its ratio labeled below.
16:9 widescreen aspect ratio wrapping an image.
Circular container via shape="ellipse" with ratio={1}, ideal for avatars and profile images.
Grid of images with consistent 4:3 aspect ratios.
Aspect ratio container with a skeleton loading placeholder.
1:1 square aspect ratio, ideal for avatars and Instagram-style images.
Displays a user avatar with image, initials fallback, and optional status indicator.
Avatars at every size with an image, initials fallback, and a status dot. A quick visual reference for choosing the right size.
Demonstrates the avatar fallback chain: primary image, fallback image, initials, then default icon.
Overlap multiple avatars in a row to represent a group of people. Use for team lists, PR reviewers, or participant counts where you want to show faces without taking up much space.
Stacked avatar display with overlapping layout and optional overflow indicator. Children are Avatar elements.
Overlapping avatar rows with a sliced visible set and a server-side overflow count. Shows team members in a compact facepile layout.
A facepile whose avatars link to profiles, with an overflow indicator that opens the full member list. The whole group is one Tab stop; arrow keys move between the avatars and the overflow button.
Overflow indicator for AvatarGroup. Shows a compact count for hidden avatars and can render custom count text or act as a button.
Overflow indicators for hidden avatars, including the default +N label and custom count text.
Provide short custom children such as 12+ when the overflow count needs compact product-specific formatting.
Use AvatarGroupOverflow without children to render the standard +N overflow count.
Show initials instead of a photo. The avatar extracts the first and last initials from the name automatically. Use when you only have a user name, like in anonymous accounts or new user onboarding.
Make an avatar interactive by passing `href` to render it as a link or `onClick` to render it as a button. Both forms are focusable and show a focus-visible ring for keyboard users. Use for profile links, mention pop-ups, or any avatar people can act on.
Show a profile photo at different sizes. Use when you have a user photo URL. If the image fails to load, initials are shown instead.
Add a status dot to an avatar to show whether someone is online, away, or busy. Use in chat, messaging, or any UI where knowing availability matters.
Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (filled, ring, minus) so status is never conveyed by colour alone (WCAG 1.4.1).
AvatarStatusDot renders a presence indicator on an Avatar, with variants for positive, neutral, and negative states. The dot size automatically coordinates with the Avatar size.
Presence dots on Avatars using the success, neutral, and error variants. Pass an AvatarStatusDot to the Avatar status prop; the dot sizes itself to match the Avatar.
By default an avatar shows its name in a tooltip on hover and keyboard focus. Pass a string to show custom text instead, or false to turn the tooltip off.
Place an avatar next to a name and role to create a user card row. Use for comment headers, contact lists, profile sections, or anywhere you need to identify a person at a glance.
Badge highlights a status or category at a glance. Use it sparingly: only when a value represents a distinct state (Active, Failed) or a grouping tag (Engineering, Design). Most metadata (dates, durations, counts, descriptions) should be plain description text, not badges.
Tag items with color-coded categories like teams, priorities, or topics. Use the 9 non-semantic color variants when you need to distinguish groups visually.
Show a number inside a badge for notification counts, unread messages, or task totals. Use next to icons, nav items, or list labels.
Show the state of an item like Active, Pending, or Failed. Use in table rows, list items, or detail pages where users need to see status at a glance.
All semantic and color badge variants in a single view. Use semantic variants for status and color variants for categories.
Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that the user needs to see until they act on it.
Add a button to a banner so the user can act on the message. Use for trial expirations, payment failures, or anything that needs a response.
Combine an action button, dismiss control, and a collapsible detail area in one banner. Children sit behind the toggle by default; `collapsible={{defaultIsOpen: true}}` starts it open, and `collapsible={false}` drops the toggle entirely. Use for complex notifications like config changes or deployment summaries.