Get started

Install the package, import the styles + a (brand, tone) token CSS, wrap your tree, and start using components. Avala Design ships React + Tailwind v4 + Radix. Next.js consumers get a `withAvalaDesign` helper that wires transpilePackages for you.

npm install @avala/design @avala/design-tokens
# or pnpm / yarn equivalents

/* app/globals.css */
@import "@avala/design/styles";
@import "@avala/design-tokens/css/avala.g100.css";
/* Swap to .g10.css for light, or any of the 16 (brand, tone) emits. */

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

export default function Page() {
  return <Button kind="primary">Hello, Avala</Button>;
}

// next.config.ts
import { withAvalaDesign } from "@avala/design/next-config";

export default withAvalaDesign({
  // your existing config
});