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 is an open source design system for building UI with reusable components, themes, templates, docs, and a CLI. It is designed to be customizable and ready for agent-assisted setup.
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 Alternativen
图像大厨imgcook
imgcook is a design-to-code tool that converts design drafts into front-end code. It supports plugin-based and developer workflows for Sketch, Photoshop, VS Code, and CLI usage.
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads inside Firecracker micro-VMs. It is designed for workflows that need machine-level isolation, private networking between sandboxes, and programmatic control through SDK, CLI, or MCP.
hob
hob is an independent workspace for coding agents that keeps agent sessions, terminals, history, and follow-up work organized around the tools and providers you already use. It is aimed at developers who want local control over routing, history, and workspace structure rather than a bundled model stack.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Manta AI
Manta AI is an autonomous web app testing tool for teams that want to map application behavior, catch regressions, and generate tests without writing scripts or maintaining selectors. It works from a URL and supports plain-English test flows, run results with screenshots, and scheduled or deployment-triggered checks.