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.
Give a visually implicit section an accessible name so screen-reader users can navigate to it.
Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.
Vertical stack for arranging items top-to-bottom. Supports polymorphic rendering.
Demonstrates VStack arranging items vertically with different gaps.
A heading and paragraphs stacked vertically with a consistent gap. Use VStack whenever siblings should flow top to bottom with even spacing.
Compare a numeric pixel width with rem and percentage lengths. The width budget also caps the drawer on mobile.
Pass onOpenChange to render a close button that calls it with false. Drawer renders no close button of its own, so this is the usual visible way to close.
Add a subtitle under the title and put a status, such as a Badge, in endContent. The close button stays at the end of the row.
Single work-item detail in two columns: a title with a status selector, a description, a subtask checklist with progress, an attachments block, and a comment and activity feed in the main column, plus a property rail with assignee, dates, labels, and linked items. The shape for any tracked item with children, properties, and a comment history — a task, ticket, issue, story, bug, card, request, or work item.