5 minutes · 3 files · 1 wrapper

Get started

Pick your platform, install the package, import the styles, drop in your first component. Carbon-shaped APIs, Avala-branded tokens, all 16 brand × tone emits available.

Pick your platform

Web

React + Tailwind v4

Next 14+/16+ App Router, React 19, Tailwind v4, Radix a11y backbone. Five-step install.

Open →

Flutter

Native Dart

First-class Flutter kit. AvalaTheme + AvalaTokens.of(context) + Widgetbook + goldens.

Open →

Tokens

DTCG JSON + per-platform emits

Style Dictionary 4 source for CSS / SCSS / JS / Dart / DTCG JSON. 16 emits, lockstep.

Open →

5-minute web install

The fast path for Next.js / React projects. For the full walk-through (next.config wiring, theme provider, brand × tone), open /developing/web.

Install

bash

npm i @avala/design @avala/design-tokens
# or
bun add @avala/design @avala/design-tokens

Import styles

src/app/globals.csscss

@import "tailwindcss";
@import "@avala/design/styles";
@import "@avala/design-tokens/css/avala.css";

Wrap the tree

src/app/layout.tsxtsx

import { ThemeProvider } from "@avala/design";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider defaultBrand="avala" defaultTone="g100">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Render

src/app/page.tsxtsx

import { Button, Tag } from "@avala/design";

export default function Page() {
  return (
    <div className="p-8">
      <h1 className="text-heading-04 text-text-primary mb-4">Hello, Avala.</h1>
      <Button kind="primary" size="md">Primary action</Button>
      <Tag tone="green" className="ml-3">Stable</Tag>
    </div>
  );
}

Next steps

Catalog

Components

79 primitives, patterns, layout, domain components.

Open →

Live

Brand × tone matrix

See every brand × tone permutation rendered at once.

Open →

Migrating

From Carbon

60+ token rename + value-override mappings.

Open →