Install

Azalea ships source, not a build — there is no dist/ to fall out of date, and your own Tailwind sees the class names it needs to generate.

1. Add the dependency

// package.json
"dependencies": {
  "azalea": "git+ssh://git@gitlab.com/averoa/azalea.git#main"
}

2. Transpile it

Because Azalea ships TSX rather than compiled JavaScript, Next has to compile it alongside your own code.

// next.config.ts
const nextConfig: NextConfig = {
  transpilePackages: ["azalea"],
};

3. Import the tokens

After Tailwind, so the token definitions win.

/* app/globals.css */
@import "tailwindcss";
@import "azalea/tokens.css";

4. Stop the theme flash

ThemeScript applies the stored theme before first paint. Without it the page paints light and corrects on hydration, which is the flicker that makes an app feel cheap.

// app/layout.tsx
import { ThemeScript } from "azalea";

<html lang="en" suppressHydrationWarning>
  <head><ThemeScript /></head>
  <body>{children}</body>
</html>

5. Use it

import { Button, StatusBadge, DataList, DataListRow } from "azalea";

<DataList>
  <DataListRow interactive>
    <StatusBadge status={run.status} />
    <span className="font-medium">{run.workflow}</span>
  </DataListRow>
</DataList>

Upgrading

A git dependency pins to a branch, so `npm update azalea` pulls the latest main. That is deliberate friction: a design system that changes under four services without anyone running a command is how a brand drifts.

npm update azalea && npm run build