Astryx
Meta's open-source React + StyleX design system, 150+ components and 42 templates
Tier S · Best in classComponent LibraryDesign System DocsTemplateastryx.atmeta.com
Astryx is the design system Meta grew internally for eight years across 13,000+ apps, released publicly in mid-2026 under MIT. It ships 150+ React components and hooks built on StyleX, seven theme packages, 42 full page templates, and a CLI whose entire purpose is to feed component props, variants, tokens and templates to coding agents instead of making them crawl the docs site. It targets teams building dense internal tools, dashboards, chat and AI product surfaces in React 19.
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli && npx astryx initFor an agent
Do not crawl the docs site — it is a client-rendered shell that returns almost nothing to a plain fetch. Use the CLI instead: `npx @astryxdesign/cli component --list`, `component <Name>`, `search "<thing>"`, and `template --list` return the same props, variants and templates in agent-readable form, and `npx astryx init` writes an AGENTS.md/CLAUDE.md into the repo. Two traps: the bare `npx astryx` name resolves to an unrelated npm package until the scoped CLI is a project dependency, and Astryx is StyleX, not Tailwind — it will not compose with shadcn/ui or Radix-based kits in one tree, so pick it for a whole app (React 19+ required), not for one screen.
Why it is here. The first major design system built for AI agents as a first-class consumer, backed by eight years of production use across 13,000 Meta apps — the CLI-as-docs model is what other systems will copy.
Facts
- License
- MIT
- Pricing
- Free, Open source
- Framework
- React, Next.js
- Styling
- StyleX, CSS custom properties
- Distribution
- npm package, CLI installer, GitHub repository
- Platform
- Web
- Content type
- Code, Design tokens / theme files
- Agent readiness
- CLI installable, llms.txt, Structured documentation, Readable open source, Copy-paste ready code
- Accessibility
- Accessible, Keyboard navigable, Focus management and visible focus, RTL and i18n aware
- Maturity
- Beta
- GitHub stars
- 12,000
- Package
- @astryxdesign/core
Components it ships
150 totalHelps you build
20Templates
42- AI Chat · Full conversational AI app shell with composer, message list and tool calls
- AI Chat Landing · Empty/first-run state for an AI chat product with prompt suggestions
- Dashboard · Standard analytics dashboard layout with stats and charts
- Dashboard Portfolio · Finance-flavoured dashboard variant for portfolio or holdings data
- Login · Baseline sign-in page
- Login Card · Centered card sign-in layout
- Login Split · Split-screen sign-in with a visual panel
- Login SSO · Enterprise SSO / identity-provider sign-in flow
- Library · Browsable asset or content library screen
- Centered Hero · Marketing landing hero, centered composition
- Gallery Hero · Landing hero backed by an image gallery
- Classic Gallery · Uniform grid gallery of media items
- Mixed Gallery · Mixed-aspect-ratio gallery grid
- Side Gallery · Gallery with a persistent side detail or filter rail
- Payment Form · Card payment / billing details capture
- Contact Form · Contact or support request form page
- Form Two Column · Dense two-column form layout for long data entry
- Documentation · Docs site shell with sidebar nav and page outline
- Documentation Design · Docs layout tuned for design guidance and visual examples
- Documentation Technical · Docs layout tuned for API and code reference
- File Explorer · Tree-plus-detail file browsing interface
- IDE · Code editor shell with file tree, panels and resizable splits
- Editor · Document/content editing surface
- Incident Console · Operational incident triage console with status and severity
- Kanban Board · Column-based task board with draggable cards
- Messaging Shell · Multi-conversation messaging app layout
- Detail Page · Generic single-record detail view with metadata
- Product Detail · Commerce product page with media and specs
- Product Gallery · Product listing grid with filtering
- Table · Bare data table pattern
- Table Page · Full table screen with toolbar, filters and pagination
- Table Grouped · Table with grouped and expandable rows
- Table Page Chart · Table screen paired with a summary chart
- Table Page Heatmap Status · Table with heatmap cells for status density
- Table Page Shoe Store Heatmap · Worked retail-inventory example of the heatmap table
- Settings · Settings page layout
- Settings Sidebar · Settings with a sectioned sidebar navigation
- Settings Dialog · Settings presented inside a modal dialog
- Shell Nav · Base application shell with navigation regions
- Shell Side Nav · App shell with collapsible side navigation
- Shell Top Nav · App shell with top navigation and mega menu
- Theme Showcase · Reference page rendering every token and theme variant
Notable for
- 150+ components with table and chat primitives
- 42 page templates
- CLI built for coding agents
- seven themes including dark-only Gothic
- StyleX, no Tailwind dependency
- MIT from Meta
Provenance
Verified 2026-08-15. HTTP 200. https://astryx.atmeta.com/components (WebFetch, full component enumeration), https://astryx.atmeta.com/docs/getting-started, https://astryx.atmeta.com/docs, https://astryx.atmeta.com/llms.txt, https://astryx.atmeta.com/sitemap.xml (215 component doc pages, 42 template slugs — template display names and purposes are derived from those slugs because the templates pages render client-side and return no server HTML), https://github.com/facebook/astryx, plus a web search for release date and star count
Also in Component Libraries
6- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Chakra UI · 114 accessible React components with a token-driven styling system
- Coss UI · Cal.com's design system: 60 Base UI primitives shipped as a shadcn registry
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- GPUI Component · 60+ Rust desktop UI components for GPUI, with a 200K-line code editor and charts
- Headless UI · 16 unstyled, fully accessible React and Vue primitives from Tailwind Labs