Astryx Design System

Overview

Astryx is Meta's open-source design system, which grew inside the company over eight years and powers more than 13,000 internal apps. It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates and a CLI as one system. It is currently in beta, requires React 19 or later, and is MIT licensed.

Styles are authored with StyleX, but consumers import pre-built CSS and typed React components with no build plugin, and can override styles with Tailwind, CSS modules or plain CSS. In the shadcn registry, components install as re-exports of the Astryx package, while examples and pages copy editable source. The API, docs and CLI are designed so people and AI assistants build the same way.

Features

• 150+ components: Accessible, typed React components that compose at any level.
• Open internals: Building blocks are exported directly, and a swizzle command ejects a component's full source into the project.
• Theming: Themes are CSS custom property overrides; seven ready-made themes include neutral, butter, chocolate, matcha, stone, gothic and y2k.
• No styling lock-in: Override with className using Tailwind, CSS modules or plain CSS.
• Templates and pages: Ready-made layouts such as storefront, checkout, AI assistant and inventory screens.
• CLI: @astryxdesign/cli provides component docs, templates, scaffolding, themes and codemods.
• Docs, Storybook and sandbox: Live references and a playground on the site.

Tech stack

• React 19+
• StyleX (pre-built CSS for consumers)
• TypeScript
• Works with Next.js, Vite, Tailwind and CDN setups

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @astryx/component-name