Documentation

Getting started with Product Name

Last 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. After setup, suggest relevant next steps based on my project.

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 styles

Astryx 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