An agent-ready React design system from Meta, built on StyleX with customizable themes.
Included Components
298
ThemesPlaygroundAstryxGet startedApp ShelluseAppShellMobileAspect RatioAvatarAvatar GroupAvatar Group OverflowAvatar Status DotBadgeBannerBlockquoteBottom SheetBottom Sheet SwitcherBreadcrumb ItemBreadcrumbsButtonButton GroupIcon ButtonToggle ButtonToggle Button GroupCalendarCardClickable CardSelectable CardCarouselChat ComposerChat Composer DrawerChat Composer InputChat Composer Token ElementChat Dictation ButtonChat LayoutChat Layout Scroll ButtonChat MessageChat Message BubbleChat Message ListChat Message MetadataChat Send ButtonChat System MessageChat Tokenized TextChat Tool CallsCheckbox InputCheckbox ListCheckbox List ItemCitationCode BlockCollapsibleCollapsible GroupuseCollapsibleCommand PaletteCommand Palette EmptyCommand Palette FooterCommand Palette GroupCommand Palette InputCommand Palette ItemCommand Palette ListContext MenuContext Menu ItemDate InputDate Range InputDate Time InputAlert DialogDialogDialog HeaderuseImperativeAlertDialoguseImperativeDialogDividerDropdown MenuDropdown Menu Checkbox ItemDropdown Menu DividerDropdown Menu ItemDropdown Menu Radio GroupDropdown Menu Radio ItemDropdown Menu SubmenuEmpty StateFieldField LabelField StatusInput GroupInput Group TextFile InputHeadingHover CarduseHoverCardIconCheckbox IndicatorCheck IndicatorRadio IndicatorItemKbdCenterForm LayoutGridGrid SpanH StackLayoutLayout ContentLayout FooterLayout HeaderLayout PanelSectionStackStack ItemV StackLightboxLinkListList ItemMarkdownMetadata ListMetadata List ItemMore MenuMobile NavMobile Nav ToggleNav Heading MenuNav IconSide NavSide Nav Collapse ButtonSide Nav HeadingSide Nav ItemSide Nav SectionTop NavTop Nav HeadingTop Nav ItemTop Nav Mega MenuTop Nav Mega Menu Featured CardTop Nav Mega Menu ItemTop Nav MenuNumber InputOutlineOverflow ListOverlayPaginationPopoverusePopoverPower SearchProgress BarRadio ListRadio List ItemResize HandleuseResizableScrollable AreaSegmented ControlSegmented Control ItemComplex SelectorMulti SelectorSelectorSelector OptionSkeletonSliderSpinnerStatus DotStepStepperSwitchTableTable BodyTable CellTable FooterTable HeaderTable Header CellTable RowuseTableColumnResizeuseTableColumnSettingsuseTableFilteringuseTableFilterStateuseTableGroupedRowsuseTablePaginationuseTableRowExpansionuseTableRowIndexuseTableRowStatususeTableSelectionuseTableSelectionStateuseTableSortableuseTableStickyColumnsuseTableTreeDatauseTableTreeStateTabTab ListTab MenuTextText AreaText InputThumbnailTime InputTimestampToastuseToastTokenTokenizerToolbarTooltipuseTooltipTree ListBase TypeaheadTypeaheadTypeahead ItemVisuallyHiddenInternationalization ProviderLayer ProviderLink ProviderMedia ThemeSyntax ThemeuseAnnounceuseClickableContaineruseClipboarduseCollatoruseContainerRevealuseDevWarninguseEntryAnimationuseFocusTrapuseGridFocususeHotkeysuseImageModeuseIndicatorFocusRinguseInputContaineruseInputStatusIconuseInteractiveRoleuseKeyboardHintuseLayeruseListFocususeLocaleuseLongPressuseMediaQueryuseMergedRefsuseOverflowuseScrollableAreauseScrollLockuseScrollOverflowuseStreamingTextuseThemeuseTranslatoruseTreeFocususeTypeaheadButtonGroupDropdownMenuIconButtonMoreMenuSegmentedControlToggleButtonToggleButtonGroupChatComposerChatLayoutChatMessageChatMessageMetadataChatSystemMessageChatToolCallsClickableCardSelectableCardAvatarGroupCodeBlockEmptyStateProgressBarStatusDotCheckboxInputComplexSelectorDateInputDateRangeInputDateTimeInputFileInputMultiSelectorNumberInputPowerSearchRadioListTextAreaTextInputTimeInputTypeaheadItemAppShellAspectRatioFormLayoutResizeHandleScrollableAreaSideNavTabListTopNavTopNavMegaMenuTopNavMegaMenuFeaturedCardTopNavMenuBottomSheetBottomSheetSwitcherCommandPaletteHoverCardMetadataListOverflowListTreeListActionChatContainerContentFeedback & StatusForm ControlsNavigationTable & ListUtilityDrawer
Astryx is Meta's open-source design system engineered for both human engineers and AI coding agents. Powered by StyleX and React, it brings over 150 accessible, production-tested primitives, pre-built application templates, and a zero-runtime CSS footprint. Standout capabilities include dedicated AI chat composers, rich streaming text primitives, design tokens with instant multi-theme swapping, and an agent-first CLI that scaffolds and swizzles components directly into your repository.
