Choose theme
AI Visuals
Astryx
Astryx is Meta’s React design system for building interfaces with reusable components, themes and page templates, with tooling intended for developers and the coding agents working alongside them.
Its CLI exposes component APIs, design tokens and examples through terminal commands and structured JSON. A developer or agent can look up the available building blocks before composing the interface. Use this as a first read, not a recommendation. Open the original project before trusting details like terms, limits, privacy, cost, setup, or safety.
What it is
Components and their working reference
Astryx brings typed React components, styling tokens, themes and templates together with documentation tools. The same CLI and programmatic API serve people, coding assistants and build tools.
Why it stands out
Choose how deeply to customize
Theme variables can change the visual identity, exported component pieces allow composition, and swizzle can copy a component’s source into your project. Those are different levels of control over a shared design system.
Availability
Published React packages, currently in Beta
The project publishes Core, CLI and theme packages under @astryxdesign and declares MIT. It requires React 19 or later. The repository links documentation, Storybook examples and a sandbox for inspecting the system.
Email updates
See which AI tools are getting attention
Get occasional, source-linked notes on what they do, who they may suit, and what to check before trying them.
Why it matters
What makes it useful
A dashboard or settings page needs more than a collection of buttons. It needs a layout, forms, navigation and consistent component choices. Astryx supplies page and block templates alongside the component reference, so a builder can start from a documented pattern and look up its parts. The templates are content-only: your application supplies its surrounding navigation and app shell rather than receiving a complete product from a template.
What to know
Where it fits
Astryx sits in a React application. Its simplest setup imports pre-built stylesheets in the documented order and supplies a theme provider; consuming those built files does not require a StyleX build plugin. The CLI supplies reference material and scaffolding, while your chosen coding assistant or development tools still create and revise the application. Existing Tailwind, CSS modules or plain CSS can be used for overrides.
Notable points
What stands out
A theme and an ejected component solve different problems. Theme variables change shared visual decisions, while composition reuses exported building blocks. Swizzle goes further by copying the full component source into your project to own and customize. That makes a deeper change possible, but it also means there is local component code to maintain; changing a theme is not the same operation as taking ownership of an implementation.
Before using
What to review
Check React and peer dependencies, the selected CSS import order and the theme setup for your framework. The pre-built CSS route and a source build with StyleX tooling have different setup requirements.
Use the documented scoped package name, @astryxdesign/cli. The project warns that the unscoped astryx name resolves to an unrelated npm package when the Astryx CLI is not already installed.
CLI init writes a component guide into AGENTS.md or CLAUDE.md so an assistant can discover the system. Other commands can scaffold or copy code and apply migration changes; review which project files a chosen command changes.
The project is labelled Beta. Its README distinguishes published Core, CLI and themes from the unpublished internal Lab package and chart packages available only under the canary tag.
The security policy says only the latest released version of each @astryxdesign package receives security updates.
Reader fit
Who may find it relevant
React developers and teams building interfaces with coding agents are the clearest audience, particularly when they want shared components but room for their own visual identity and implementation changes. Storybook and the sandbox offer an inspection path before adopting the packages. Using Astryx still involves application development, dependency choices and review of the resulting interface.
Editorial note
Why LifeHubber lists it
We list Astryx because its reference tooling makes the version behind an answer visible. Successful JSON responses include meta.answeredBy, naming the CLI version, the paired Core version when one is available, and which copy answered; within a project, the CLI uses that project’s version. For someone reviewing an agent’s component code, this gives a concrete way to compare the reference it retrieved with the library the app actually uses. The component library and this version context are useful together when an example or generated prop needs to be checked against the project’s installed APIs.
Source links
Source materials
Reader note
Before relying on this entry
LifeHubber lists entries to help readers inspect AI projects, not to endorse them or prove they are safe, suitable, accurate, maintained, or right for a specific use. We do not verify every entry in depth. Before relying on anything listed, review the original materials, terms, privacy practices, limits, and risks that matter for your situation.
More in AI Agents
Keep browsing this category
Explore more AI agent projects.
Paperclip
paperclipai/paperclip
A self-hosted server and dashboard for coordinating agent teams through companies, goals, roles, issues, heartbeats, budgets, approvals, and persistent activity records.
Godot MCP Toolkit
NPGameDev/godot-mcp-toolkit
An early Godot editor plugin and companion bridge for AI-assisted scene editing, live node inspection and playtests. The Asset Store marks the current version unstable.
OpenAgents
openagents-org/openagents
A shared workspace and cross-platform launcher for collaborating with and managing AI agents, with network development continuing through a separate SDK.
For project maintainers
Listed here? You can use the badge.
If you maintain a project with a current LifeHubber listing, you may add the optional “Listed on LifeHubber AI Resources” badge to its README, docs, or website. No introduction or permission request is needed.
