Getting Started

Want to skip the docs? Try our MCP Server

#
Installation

#
Install package

Install the @optiaxiom/react package using your package manager of choice:


npm install @optiaxiom/react


pnpm add @optiaxiom/react


yarn add @optiaxiom/react


bun add @optiaxiom/react

#
Setup CSS imports

Make sure to configure your bundler to handle CSS Imports.

#
Add global provider

Wrap your application with AxiomProvider:


import { AxiomProvider } from "@optiaxiom/react";
 
export function App() {
  return <AxiomProvider>{/* Your app code here */}</AxiomProvider>;
}

#
Usage

#
Basic usage

Import components from @optiaxiom/react and use them:


import { Button } from "@optiaxiom/react";
 
export function MyComponent() {
  return <Button>Hello World!</Button>;
}

#
What to read next

Box

Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

Style Props

Set an element's styles directly with utility props, backed by our design tokens.

Colors

Every text, background, and border color token, with light and dark mode values.

Typography

The type scale, and which component renders each style. Start here before reaching for font props.

Icons

Material Symbols kit for use with the Optimizely Design System

MCP

MCP server enabling AI assistants to generate accurate Axiom code.