Astryx — Meta 开源的 Agent 友好型 React 设计系统,基于 StyleX 构建,内置 150+ 无障碍组件与多套主题预设。

Meta 开源的 Agent 友好型 React 设计系统,基于 StyleX 构建,内置 150+ 无障碍组件与多套主题预设。

包含组件

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 是 Meta 经过内部数千个项目实战验证后开源的设计系统,专为现代开发者与 AI Coding Agent 协同工作打造。依托 React 与 StyleX 零运行时样式引擎,Astryx 提供了 150 多个高度无障碍的原子组件与现成全流程模板。其亮点在于深度拥抱 AI 原生交互(如 AI 对话输入框、流式打字输出与思维链状态提示)、基于设计令牌的即时多主题切换,以及能够将组件源码与规范无缝注入项目的 Agent 友好型 CLI 工具。