Astryx

Adding Astryx to a Next.js app

The core README describes the simplest setup for Next.js: install @astryxdesign/core, @astryxdesign/theme-neutral and @stylexjs/stylex, import the reset, component and theme stylesheets in globals.css, and wrap the app in a client-side provider that renders Theme and LinkProvider with Next.js Link. Vite uses the same CSS imports and providers. The repository includes example apps for Next.js, Next.js with StyleX, Next.js with Tailwind and Vite with Tailwind under apps/.

Using Astryx alongside Tailwind CSS

Projects that already use Tailwind CSS declare an explicit @layer order, import Tailwind's theme and preflight into layers, then the Astryx stylesheets and the tailwind-theme.css bridge. The bridge maps Astryx tokens for text, surfaces, borders, status colors, radius and shadow to Tailwind classes, and Tailwind spacing follows the Astryx spacing unit, so p-4 equals 16px. The documentation notes that a @layer line placed below the Tailwind import inverts the cascade.

Building UI with an AI coding agent

The Working with AI guide has the agent install the CLI and run npx @astryxdesign/cli init --features agents. The generated instructions describe a three-step workflow: astryx build "<idea>" to choose a starting template, astryx template <name> <path> to scaffold it, and astryx component <Name> to read props before use. They also contain rules such as starting every page from a template, avoiding raw div elements and inline styles, and using tokens instead of hard-coded values. Agents that support MCP can query the hosted server instead of the CLI.

Branding an app with a custom theme

The documented flow installs the closest theme package, adds it with theme add, and customizes it with defineTheme extending the imported theme, then builds and adds the local theme. Several themes can be added and switched at runtime by passing a different entry of the generated themes object to Theme. The themes page previews each package, and the CLI guide docs author-a-theme covers authoring.

Keeping a project current

The getting started guide upgrades all Astryx packages to the same release in one install command and then runs npx @astryxdesign/cli upgrade --from <old Core version> --apply. Each theme names the exact Core release it works with. For pnpm projects that hold new releases back, the guide describes exempting the whole @astryxdesign/* scope so packages from different releases are not installed side by side. astryx doctor then reports version alignment, theme wiring and agent docs status.

Prototyping without a build step

For a prototype, astryx template --cdn writes a single HTML file pinned to the installed version, loading React 19 and Core from esm.sh through an import map. Components are created with React.createElement because nothing compiles JSX. The public playground and sandbox offer another way to try templates in the browser. Similar projects listed on iThub include Toolpad, a set of React components for admin panels.