Getting started with Product NameLast updated March 30, 2026
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 packagenpm install @astryxdesign/core
Step 2: Add the StyleX compilerAstryx uses StyleX for styling. Add the compiler plugin to your build configuration.npm install @stylexjs/babel-plugin
Step 3: Import your first componentimport { Button } from '@astryxdesign/core/Button';
export default function App() {
return <Button label="Hello Astryx" variant="primary" />;
}
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.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