Astryx

An open source design system that is fully customizable and agent ready.

by Meta

47components51.1Kviews346bookmarks

Installs all 340 components. Without our CLI, run instead.

Auto-indexed

Astryx Toggle Button

Astryx Button Group

Astryx Breadcrumbs

Astryx Button

Astryx Blockquote

Astryx Badge

About Astryx

Astryx publishes a shadcn registry at astryx.atmeta.com, with 340 components installable through the shadcn CLI.

Components: 340
GitHub stars: 27,108
Last commit: Nov 13, 2026
Repository: meta/astryx

Also in the Astryx registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

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-checkbox-indicator
component-checkbox-input
component-checkbox-list
component-checkbox-list-item
component-check-indicator
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-heading
component-hover-card
component-h-stack
component-icon
component-icon-button
component-info-tip
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-richtext-rich-text-editor-auto-link-plugin
component-richtext-rich-text-editor-toolbar
component-richtext-rich-text-view
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-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-tab-list
component-tab-menu
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-visually-hidden
component-v-stack
showcase-alert-dialog-delete
showcase-app-shell-default
showcase-aspect-ratio-default
showcase-avatar-default
showcase-avatar-group-default
showcase-avatar-group-overflow-default
showcase-avatar-status-dot-default
showcase-badge-variants
showcase-banner-statuses
showcase-base-typeahead-custom-search-bar
showcase-blockquote-default
showcase-bottom-sheet-default
showcase-bottom-sheet-switcher-default
showcase-breadcrumb-item-default
showcase-breadcrumbs-default
showcase-button-group-default
showcase-button-variants
showcase-calendar-default
showcase-card-default
showcase-carousel-default
showcase-center-default
showcase-chat-composer-input-default
showcase-checkbox-input-default
showcase-checkbox-list-default
showcase-checkbox-list-item-default
showcase-citation-default
showcase-clickable-card-default
showcase-code-block-default
showcase-code-default
showcase-collapsible-default
showcase-collapsible-group-default
showcase-command-palette-default
showcase-command-palette-empty-default
showcase-command-palette-footer-default
showcase-command-palette-group-default
showcase-command-palette-input-default
showcase-command-palette-item-default
showcase-command-palette-list-default
showcase-complex-selector-default
showcase-context-menu-default
showcase-context-menu-item-default
showcase-date-input-default
showcase-date-range-input-default
showcase-date-time-input-default
showcase-dialog-default
showcase-dialog-header-default
showcase-divider-variants
showcase-drawer-basic
showcase-drawer-header-default
showcase-dropdown-menu-default
showcase-dropdown-menu-group-default
showcase-dropdown-menu-item-default
showcase-empty-state-default
showcase-field-default
showcase-field-label-default
showcase-field-status-default
showcase-file-input-default
showcase-form-layout-default
showcase-grid-default
showcase-grid-span-default
showcase-heading-default
showcase-hover-card-default
showcase-h-stack-default
showcase-icon-button-default
showcase-icon-default
showcase-info-tip-default
showcase-input-group-default
showcase-item-default
showcase-kbd-default
showcase-layout-content-default
showcase-layout-default
showcase-layout-footer-default
showcase-layout-header-default
showcase-layout-panel-default
showcase-lightbox-default
showcase-link-default
showcase-list-default
showcase-list-item-default
showcase-markdown-default
showcase-media-theme-media-overlay
showcase-metadata-list-default
showcase-metadata-list-item-default
showcase-mobile-nav-default
showcase-mobile-nav-toggle-default
showcase-more-menu-default
showcase-multi-selector-default
showcase-nav-icon-default
showcase-number-input-default
showcase-outline-default
showcase-overflow-list-default
showcase-overlay-default
showcase-pagination-variants
showcase-popover-default
showcase-power-search-default
showcase-progress-bar-default
showcase-radio-list-default
showcase-radio-list-item-default
showcase-rich-text-editor-default
showcase-scrollable-area-default
showcase-section-variants
showcase-segmented-control-default
showcase-segmented-control-item-default
showcase-selectable-card-default
showcase-selector-default
showcase-selector-option-default
showcase-side-nav-collapse-button-default
showcase-side-nav-default
showcase-side-nav-heading-default
showcase-side-nav-item-default
showcase-side-nav-section-default
showcase-skeleton-default
showcase-slider-default
showcase-spinner-default
showcase-stack-directions
showcase-stack-item-default
showcase-status-dot-default
showcase-step-default
showcase-stepper-checkout-progress
showcase-switch-default
showcase-syntax-theme-compact-preset
showcase-tab-default
showcase-table-default
showcase-tab-list-default
showcase-tab-menu-default
showcase-text-area-default
showcase-text-default
showcase-text-input-default
showcase-theme-distinct-themes
showcase-thumbnail-default
showcase-time-input-default
showcase-timer-default
showcase-timestamp-default
showcase-toast-default
showcase-toggle-button-default
showcase-toggle-button-group-default
showcase-token-default
showcase-tokenizer-default
showcase-toolbar-three-slot
showcase-tooltip-default
showcase-top-nav-default
showcase-top-nav-heading-default
showcase-top-nav-item-default
showcase-top-nav-mega-menu-default
showcase-top-nav-mega-menu-featured-card-default
showcase-top-nav-mega-menu-item-default
showcase-top-nav-menu-default
showcase-tree-list-default
showcase-typeahead-default
showcase-typeahead-item-default
showcase-visually-hidden-default
showcase-v-stack-default

From the Astryx readme

Astryx

An open source design system that's fully customizable and built for how we build now: by people and the agents working alongside them.

Currently in Beta · Built on React 19+ and StyleX

Docs · Storybook · Sandbox · Contributing · Discord

Overview

Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day.

It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system. You import pre-built CSS and use typed React components — no build plugin, no styling library to adopt — and both people and AI assistants build with the same tooling.

What makes Astryx different:

Open internals. Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you'd reach for are exported directly, and when you need to go deeper, swizzle ejects a component's full source into your project to own.
No styling lock-in. Astryx authors its styles with StyleX, but that's invisible to consumers. Override with className using Tailwind, CSS modules, or plain CSS — whatever your project already uses.
Customize without wrapping. A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source.
Built for people and agents. The API, docs, and CLI are designed together so a person and an AI assistant build the same way, from the same reference.

Getting Started

Astryx requires React 19 or later (react and react-dom are peer dependencies of @astryxdesign/core).

Install Astryx, a theme, and its peer dependencies:

# npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

# pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
pnpm add -D @astryxdesign/cli

# yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
yarn add -D @astryxdesign/cli

You can also install the CLI once for your computer, so astryx works in any folder and every coding agent knows Astryx; in a project, it still runs that project's own version:

npm i -g @astryxdesign/cli

Project install, global install, or both? astryx docs global/project-global-or-both compares them (both is recommended), and astryx docs global explains how global mode works.

The simplest setup is a few CSS imports plus a theme provider — no build plugin, no PostCSS or Babel config. See the @astryxdesign/core README for the full guide (Next.js, Tailwind, Vite, and CDN).

For reliable CLI access, add a script to your package.json:

"scripts": {
  "astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
}

Then use it as npm run astryx -- component --list. This avoids path errors when AI assistants or new developers invoke the CLI directly.

Packages

Package	Description	README
`@astryxdesign/core`	Components, theme system, and utilities	README
`@astryxdesign/cli`	CLI tooling: component docs, templates, scaffolding, themes, and codemods	README
`@astryxdesign/build`	Build plugins for StyleX source builds	README
`@astryxdesign/theme-*`	Seven ready-made, fully customizable themes (neutral, butter, chocolate, matcha, stone, gothic, y2k)	README

@astryxdesign/lab (experimental components) is used internally for Storybook and the sandbox and is not published to npm. @astryxdesign/vega (Vega/Vega-Lite chart wrapper) and @astryxdesign/charts (chart components) are published to npm only under the @canary dist-tag — there is no stable release yet.

Principles

These are the promises Astryx makes to the people building on it.

Guidance over enforcement. Components give you capability rather than guardrails that fight you. Design opinions live in docs and examples — if you pass a value, the component renders it.
Strong, documented conventions. Every component follows the same naming, prop, and composition rules, and every one is thoroughly documented — so once you've learned a few, the rest feel familiar, and both people and AI can predict how an unfamiliar component behaves.
One system for humans and AI. The API, conventions, docs, and CLI are designed together so people and AI assistants build the same way. Every change that made Astryx easier for AI made it easier for people too.
Earned by measurement. We test conventions rather than assert them, hold the results loosely, and revisit them when a new situation proves them wrong.

Architecture

Foundations

The building blocks for visually cohesive and accessible interfaces: typography, color, layout, and accessibility.

Components

A library of 150+ reusable UI building blocks with full TypeScript support.

Patterns

Battle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns, data entry flows.

Project Structure

Directory	Purpose
`apps/`	Example apps, the docsite, and Storybook
`packages/`	Published packages: core, cli, build, themes
`internal/`	Internal tooling: test utilities, eslint plugin, vibe tests

Contributing

We welcome contributions! See CONTRIBUTING.md for the full guide.

Questions, or want a hand with a PR? Come find us in Discord.

Our conventions and review rubrics live in the Contributing wiki — including API Conventions, Design Conventions, the Component Lifecycle, the Contributing Templates, and the Blog Review Rubric. Read the relevant rubric before opening a PR.

Quick start for contributors: this repo uses Node 22+ on an active LTS line and pnpm 11. Install pnpm directly, or enable Corepack once so the pinned pnpm version installs automatically:

corepack enable
pnpm install

If corepack is missing, install pnpm directly or install Corepack manually; see the troubleshooting notes in CONTRIBUTING.md.

The Theme Showcase DOM tests use the root ui project for shared DOM and StyleX test setup. Run pnpm exec vitest run --project ui apps/docsite/src/__tests__/theme-showcase/ from the repository root.

License

MIT

Read the rest on GitHub →

What Astryx shipped recently

Every appearance and removal our crawl has seen in the registry index.

component-alert-dialogaddedNov 12, 2026
component-app-shelladdedNov 12, 2026
component-aspect-ratioaddedNov 12, 2026
component-avataraddedNov 12, 2026
component-avatar-groupaddedNov 12, 2026
component-avatar-group-overflowaddedNov 12, 2026
component-avatar-status-dotaddedNov 12, 2026
component-badgeaddedNov 12, 2026
component-banneraddedNov 12, 2026
component-base-typeaheadaddedNov 12, 2026
component-blockquote

Registries like Astryx

Magic UI

by Dillion Verma

components

coss

by coss

components

cult ui

by cult/ui

components

Motion Primitives

by Julien Thibeaut

components

Browse every shadcn registry we track →

Astryx contents

Astryx Toggle Button

Astryx Toggle Button

Astryx Toggle Button

Astryx Toggle Button

Astryx Toggle Button

Astryx Toggle Button

Astryx Button Group

Astryx Breadcrumbs

Astryx Breadcrumbs

Astryx Breadcrumbs

Astryx Breadcrumbs

Astryx Breadcrumbs

Astryx Button

Astryx Button

Astryx Button

Astryx Button

Astryx Button

Astryx Blockquote

Astryx Blockquote

Astryx Blockquote

Astryx Badge

Astryx Badge

Astryx Badge

Astryx Badge

About Astryx

Also in the Astryx registry

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-checkbox-indicator

component-checkbox-input

component-checkbox-list

component-checkbox-list-item

component-check-indicator

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