ActiveForms13,762
@astryx
Forms · MIT · data updated 2026-10-27
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.
accessibilityblocksbuttonscardsdesign-systemformshooksiconsloadersmarketingmediamobilenavigationoverlaystablestheming
Install
npx shadcn@latest add https://astryx.atmeta.com/shadcn/registry.jsonHealth
StatusActive
Last committoday
LicenseMIT
Open issues835
ArchivedNo
Stars13,762
Components (921)
component-alert-dialogcomponent-app-shellcomponent-aspect-ratiocomponent-avatarcomponent-avatar-groupcomponent-avatar-group-overflowcomponent-avatar-status-dotcomponent-badgecomponent-bannercomponent-base-typeaheadcomponent-blockquotecomponent-bottom-sheetcomponent-bottom-sheet-switchercomponent-breadcrumb-itemcomponent-breadcrumbscomponent-buttoncomponent-button-groupcomponent-calendarcomponent-cardcomponent-carouselcomponent-centercomponent-chat-composercomponent-chat-composer-drawercomponent-chat-composer-inputcomponent-chat-composer-token-elementcomponent-chat-dictation-buttoncomponent-chat-layoutcomponent-chat-layout-scroll-buttoncomponent-chat-messagecomponent-chat-message-bubblecomponent-chat-message-listcomponent-chat-message-metadatacomponent-chat-send-buttoncomponent-chat-system-messagecomponent-chat-tokenized-textcomponent-chat-tool-callscomponent-check-indicatorcomponent-checkbox-indicatorcomponent-checkbox-inputcomponent-checkbox-listcomponent-checkbox-list-itemcomponent-citationcomponent-clickable-cardcomponent-codecomponent-code-blockcomponent-collapsiblecomponent-collapsible-groupcomponent-command-palettecomponent-command-palette-emptycomponent-command-palette-footercomponent-command-palette-groupcomponent-command-palette-inputcomponent-command-palette-itemcomponent-command-palette-listcomponent-complex-selectorcomponent-context-menucomponent-context-menu-itemcomponent-date-inputcomponent-date-range-inputcomponent-date-time-input
Components: component-alert-dialog, component-app-shell, component-aspect-ratio, component-avatar, component-avatar-group, component-avatar-group-overflow, component-avatar-status-dot, component-badge, component-banner, component-base-typeahead, component-blockquote, component-bottom-sheet, component-bottom-sheet-switcher, component-breadcrumb-item, component-breadcrumbs, component-button, component-button-group, component-calendar, component-card, component-carousel, component-center, component-chat-composer, component-chat-composer-drawer, component-chat-composer-input, component-chat-composer-token-element, component-chat-dictation-button, component-chat-layout, component-chat-layout-scroll-button, component-chat-message, component-chat-message-bubble, component-chat-message-list, component-chat-message-metadata, component-chat-send-button, component-chat-system-message, component-chat-tokenized-text, component-chat-tool-calls, component-check-indicator, component-checkbox-indicator, component-checkbox-input, component-checkbox-list, component-checkbox-list-item, component-citation, component-clickable-card, component-code, component-code-block, component-collapsible, component-collapsible-group, component-command-palette, component-command-palette-empty, component-command-palette-footer, component-command-palette-group, component-command-palette-input, component-command-palette-item, component-command-palette-list, component-complex-selector, component-context-menu, component-context-menu-item, component-date-input, component-date-range-input, component-date-time-input, component-dialog, component-dialog-header, component-divider, component-drawer, component-drawer-header, component-dropdown-menu, component-dropdown-menu-checkbox-item, component-dropdown-menu-divider, component-dropdown-menu-group, component-dropdown-menu-item, component-dropdown-menu-radio-group, component-dropdown-menu-radio-item, component-dropdown-menu-sub-menu, component-empty-state, component-field, component-field-label, component-field-status, component-file-input, component-form-layout, component-grid, component-grid-span, component-h-stack, component-heading, component-hover-card, component-icon, component-icon-button, component-input-group, component-input-group-text, component-internationalization-provider, component-item, component-kbd, component-layer-provider, component-layout, component-layout-content, component-layout-footer, component-layout-header, component-layout-panel, component-lightbox, component-link, component-link-provider, component-list, component-list-item, component-markdown, component-media-theme, component-metadata-list, component-metadata-list-item, component-mobile-nav, component-mobile-nav-toggle, component-more-menu, component-multi-selector, component-nav-heading-menu, component-nav-icon, component-number-input, component-outline, component-overflow-list, component-overlay, component-pagination, component-popover, component-power-search, component-progress-bar, component-radio-indicator, component-radio-list, component-radio-list-item, component-resize-handle, component-richtext-rich-text-editor, component-scrollable-area, component-section, component-segmented-control, component-segmented-control-item, component-selectable-card, component-selector, component-selector-option, component-side-nav, component-side-nav-collapse-button, component-side-nav-heading, component-side-nav-item, component-side-nav-section, component-skeleton, component-slider, component-spinner, component-stack, component-stack-item, component-status-dot, component-step, component-stepper, component-switch, component-syntax-theme, component-tab, component-tab-list, component-tab-menu, component-table, component-table-body, component-table-cell, component-table-footer, component-table-header, component-table-header-cell, component-table-row, component-table-selection-toolbar, component-text, component-text-area, component-text-input, component-theme, component-thumbnail, component-time-input, component-timer, component-timestamp, component-toast, component-toggle-button, component-toggle-button-group, component-token, component-tokenizer, component-toolbar, component-tooltip, component-top-nav, component-top-nav-heading, component-top-nav-item, component-top-nav-mega-menu, component-top-nav-mega-menu-featured-card, component-top-nav-mega-menu-item, component-top-nav-menu, component-tree-list, component-typeahead, component-typeahead-item, component-v-stack, component-visually-hidden, hook-use-announce, hook-use-app-shell-mobile, hook-use-clickable-container, hook-use-clipboard, hook-use-collapsible, hook-use-collator, hook-use-combobox, hook-use-container-reveal, hook-use-dev-warning, hook-use-entry-animation, hook-use-focus-trap, hook-use-grid-focus, hook-use-hotkeys, hook-use-hover-card, hook-use-image-mode, hook-use-imperative-alert-dialog, hook-use-imperative-dialog, hook-use-indicator-focus-ring, hook-use-input-container, hook-use-input-status-icon, hook-use-interactive-role, hook-use-keyboard-hint, hook-use-layer, hook-use-list-focus, hook-use-locale, hook-use-long-press, hook-use-media-query, hook-use-menu-press, hook-use-merged-refs, hook-use-multi-combobox, hook-use-overflow, hook-use-popover, hook-use-press-feedback, hook-use-resizable, hook-use-scroll-lock, hook-use-scroll-overflow, hook-use-scrollable-area, hook-use-streaming-text, hook-use-table-column-resize, hook-use-table-column-settings, hook-use-table-filter-state, hook-use-table-filtering, hook-use-table-grouped-rows, hook-use-table-pagination, hook-use-table-row-expansion, hook-use-table-row-index, hook-use-table-row-status, hook-use-table-selection, hook-use-table-selection-state, hook-use-table-sortable, hook-use-table-sticky-columns, hook-use-table-tree-data, hook-use-table-tree-state, hook-use-theme, hook-use-toast, hook-use-tooltip, hook-use-translator, hook-use-tree-focus, hook-use-typeahead, example-alert-dialog-loading, example-app-shell-content-only, example-app-shell-side-nav-only, example-app-shell-top-nav-only, example-app-shell-top-nav-with-side-nav, example-app-shell-with-banner, example-aspect-ratio-16-9-widescreen-image, example-aspect-ratio-circle-image, example-aspect-ratio-image-gallery, example-aspect-ratio-loading-skeleton, example-aspect-ratio-square-image, example-avatar-fallback-chain, example-avatar-group-default, example-avatar-group-interactive, example-avatar-group-overflow-custom-text, example-avatar-group-overflow-default-count, example-avatar-initials, example-avatar-interactive, example-avatar-photo, example-avatar-status-dot, example-avatar-status-dot-variants, example-avatar-tooltip, example-avatar-user-card, example-badge-colors, example-badge-counts, example-badge-status, example-banner-action, example-banner-collapsible, example-banner-dismiss, example-banner-floating, example-banner-full-width, example-banner-statuses, example-base-typeahead-custom-search-bar, example-blockquote-testimonials, example-blockquote-with-attribution, example-bottom-sheet-height-variants, example-bottom-sheet-mobile-keyboard, example-bottom-sheet-no-scrim, example-bottom-sheet-snap-points, example-bottom-sheet-switcher-review-flow, example-breadcrumb-item-basic, example-breadcrumbs-deep-path, example-breadcrumbs-icons, example-breadcrumbs-menu-item, example-breadcrumbs-separators, example-breadcrumbs-variants, example-button-end-slot, example-button-floating, example-button-group-basic, example-button-group-floating, example-button-icon, example-button-sizes, example-button-variants, example-calendar-constraints, example-calendar-range, example-calendar-single, example-calendar-two-months, example-card-callout, example-card-elevations, example-card-layout, example-card-simple, example-card-variants, example-carousel-cards, example-carousel-snap, example-center-horizontal-center, example-center-vertical-horizontal-center, example-chat-composer-attachments, example-chat-composer-drawer-feedback, example-chat-composer-flat, example-chat-composer-footer-actions, example-chat-composer-full-featured, example-chat-composer-input-controlled, example-chat-composer-input-disabled, example-chat-composer-input-mentions, example-chat-composer-input-multiple-triggers, example-chat-composer-input-slash-commands, example-chat-composer-simple, example-chat-composer-streaming, example-chat-composer-validation, example-chat-tool-calls-expandable, example-chat-tool-calls-simple, example-chat-tool-calls-statuses, example-checkbox-input-indeterminate, example-checkbox-input-states, example-checkbox-input-status, example-checkbox-list-item-basic, example-checkbox-list-select-all-with-indeterminate, example-checkbox-list-with-end-content, example-citation-inline-text, example-citation-source-list, example-clickable-card-elevated, example-clickable-card-with-nested-button, example-code-block-code-config, example-code-block-code-highlighted, example-code-block-code-scrollable, example-code-block-code-snippet, example-code-block-code-terminal, example-code-content-types, example-code-inline, example-code-text-sizes, example-collapsible-controlled, example-collapsible-faq, example-collapsible-group-density, example-collapsible-multiple-mode, example-collapsible-single-mode, example-collapsible-with-dividers, example-command-palette-async-search, example-command-palette-custom-footer, example-command-palette-empty-basic, example-command-palette-footer-basic, example-command-palette-group-basic, example-command-palette-grouped, example-command-palette-input-with-end-content, example-command-palette-item-basic, example-command-palette-list-item-states, example-command-palette-picker-mode, example-command-palette-rich-items, example-complex-selector-deadline-picker, example-complex-selector-tree-search, example-context-menu-basic, example-context-menu-bottom-sheet, example-context-menu-item-basic, example-date-input-clearable, example-date-input-description, example-date-input-formats, example-date-input-min-max-constraints, example-date-input-validation, example-date-range-input-validation, example-date-range-input-with-presets, example-date-time-input-validation, example-dialog-adaptive-presentation, example-dialog-confirmation, example-dialog-form, example-dialog-fullscreen, example-dialog-header-basic, example-dialog-required, example-dialog-scrollable, example-divider-full-bleed, example-divider-variants, example-divider-vertical, example-drawer-edit-form-with-footer-actions, example-drawer-header-with-close-button, example-drawer-header-with-subtitle-and-end-content, example-drawer-modal-or-non-modal-has-scrim, example-drawer-slide-in-from-the-start-edge, example-drawer-width-budget-pixels-or-any-css-length, example-dropdown-menu-actions, example-dropdown-menu-adaptive-presentation, example-dropdown-menu-disabled, example-dropdown-menu-group-selectable-rows, example-dropdown-menu-icon-trigger, example-dropdown-menu-item-basic, example-dropdown-menu-sections, example-dropdown-menu-submenu, example-empty-state-actions, example-empty-state-compactPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@astryx · component-alert-dialog
npx shadcn@latest add https://astryx.atmeta.com/shadcn/component-alert-dialog.jsonView source