Broad component library
The library is organized into many component categories, including buttons, forms, navigation, overlays, tables, layout, feedback, and data display, with copy-ready examples for each variant, state, and pattern.
Astryx Design System
Astryx Design System is an open source design system for reusable UI components, themes, templates, docs, and CLI, built to be customizable and agent-ready.
What is Astryx?
Astryx is an open source design system for building user interfaces with a shared component library, themes, and supporting developer tools. The site presents it as fully customizable and agent ready, with setup guidance aimed at both human developers and AI coding tools.
The getting started flow shows a practical path: install the core package, a theme, and the CLI; run `npx astryx init`; then import components from specific entrypoints and apply a theme through global CSS. The system also includes example apps and a CLI for discovering components, templates, and docs.
Key capabilities
Per-component entrypoints
Components are installed from the `@astryxdesign/core` package and imported through per-component subpaths, which keeps imports explicit and bundles smaller.
Theme-based token system
The getting started guide shows theme packages and global CSS imports, with themes supplying design tokens such as colors, spacing, radius, and typography as CSS custom properties.
Multiple styling workflows
Astryx supports several styling approaches, from plain CSS and className to Tailwind and CSS-in-JS, and documents a StyleX path for applying style overrides through `xstyle`.
CLI for docs and discovery
The CLI exposes commands for listing components, viewing docs topics, and inspecting templates and token references, making the system easier to explore and standardize in a project.
Reference app setups
Example applications are available for Next.js and Vite, including setups that combine theme CSS, StyleX, Tailwind, or source imports.
Common ways to use Astryx
Build product UI with reusable components
Use the core library when you want a ready-made set of UI primitives and patterns for product interfaces, with explicit imports for each component you add.
Apply a shared visual system
Use the theme packages and global CSS imports when you need to apply a consistent visual language across an app and control token values like color, spacing, radius, and typography.
Standardize setup and documentation
Use the CLI and generated docs when you need to onboard a team, inspect available components, or discover templates and token references from the command line.
Bootstrap an implementation from a reference app
Use the example apps as a starting point when you want a working reference for Next.js, Vite, or style-specific setups such as StyleX or Tailwind.
Review component behavior and usage
Use the browser-accessible component catalog when you need copy-ready examples for specific variants, states, and patterns before wiring them into a project.
Pros and Cons
Pros
- Open source design system with a clear setup path.
- Covers components, themes, templates, docs, and a CLI in one package ecosystem.
- Themes provide design tokens as CSS custom properties, which makes global theming straightforward.
- Supports multiple styling approaches, including StyleX.
- Offers example apps for Next.js and Vite to help teams start from working references.
Cons
- The source does not show pricing, plans, or licensing details on the captured pages beyond being open source.
- The documentation coverage in the collected evidence is partial, so some implementation details are only shown through examples rather than a full end-to-end guide.
FAQ
What is Astryx for?
Astryx is presented as an open source design system with components, themes, templates, docs, and a CLI. The getting started flow shows npm installation plus a setup command for agent docs and starter templates.
How do you get started with Astryx?
The source shows installation of @astryxdesign/core, a theme package such as @astryxdesign/theme-neutral, and @astryxdesign/cli, followed by `npx astryx init` to set up agent docs and choose a starter template.
How are Astryx components imported?
Components are imported from per-category subpath entrypoints, for example `@astryxdesign/core/Button` or `@astryxdesign/core/Layout`, which is intended to keep bundles small and make usage explicit.
Can Astryx be customized to match an existing design system?
Astryx supports multiple styling approaches, including plain CSS, className, Tailwind, CSS-in-JS, and a deeper integration with StyleX using `xstyle`.
Does Astryx provide a CLI or example apps?
The site highlights a CLI for components, tokens, templates, and docs, and the getting started guide points to example apps for Next.js and Vite. Those are the clearest implementation paths shown in the source.
Quick Facts
- Category
- Design system
- Primary use
- Building interface components with themes and supporting docs
- Installation
- npm packages plus `npx astryx init`
- Styling
- CSS, className, Tailwind, CSS-in-JS, StyleX
- Package namespace
- @astryxdesign/core and related packages
- Source domain
- astryx.atmeta.com
Astryx Design System Alternatives
图像大厨imgcook
图像大厨imgcook 是一款设计转代码工具，可将设计稿转换为前端代码，支持 Sketch、Photoshop、VS Code 和 CLI 工作流。
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.
Ghost
Ghost is a terminal-based AI assistant for chatting, code generation, and CLI tasks. Includes free models, supports Linux, macOS, Windows, and is open source.
AakarDev AI
AakarDev AI helps teams manage AI provider access, project setup, logs, and analytics in one dashboard. BYOK support included.