Astryx Sandbox

Getting started with Product NameLast updated March 30, 2026

AI Assistance

Help me get set up with Product Name. Based on my project, do the following: 1. Install @astryxdesign/core and the StyleX compiler. 2. Wrap my app in ThemeProvider. 3. Replace one existing component with an Astryx equivalent.

Prerequisites

Node.js 18+
React 18 or 19
A package manager (npm, yarn, or pnpm)

Install the package

Every project starts with installing the core package. This gives you access to all components, tokens, and utilities.

Step 1: Install the core package

bash
npm install @astryxdesign/core

Step 2: Import the precompiled stylesAstryx ships precompiled CSS, so there is no build plugin to configure. Import the reset and component stylesheets once at your app entry point.

tsx
import '@astryxdesign/core/reset.css';
import '@astryxdesign/core/astryx.css';

Step 3: Import your first component

tsx
import { Button } from '@astryxdesign/core/Button';
export default function App() {
  return <Button label="Hello Astryx" variant="primary" />;
}

Configure theming

Astryx ships with a default theme that works out of the box. To customize colors, typography, and spacing, wrap your app in a theme provider.

tsx
import { ThemeProvider } from '@astryxdesign/core/Theme';
export default function App({ children }) {
  return (
    <ThemeProvider theme="default">
      {children}
    </ThemeProvider>
  );
}

See the theming guide for the full list of customizable tokens.

Next steps

Fundamental concepts — How theming, layout, and composition work
Component API reference — Props, variants, and examples for every component
Accessibility — Built-in a11y features and ARIA patterns
CLI tools — Scaffold projects and manage templates
Design tokens — Colors, spacing, typography, and sizing