Installation

Install the @aur-ui/ui package and wire up Tailwind CSS v4.

Aur UI ships as a single npm package. Your project needs React 19 and Tailwind CSS v4.

Install the package

bash

pnpm add @aur-ui/ui

The package carries its own dependencies (Radix UI, Base UI, recharts, …); react, react-dom, and tailwindcss are peer dependencies you already have.

Wire up Tailwind

Every component's styling is built on the Aur design tokens (bg-surface, rounded-panel, text-ink-900, …). Import the tokens and let Tailwind scan the package so those utilities are generated:

css

@import "@aur-ui/ui/styles/globals.css";
@source "../node_modules/@aur-ui/ui/dist";

The tokens file already contains @import "tailwindcss", so it can serve as your global stylesheet directly. Without the @source line the components render unstyled — Tailwind never sees the class names used inside the package.

Use a component

tsx

import { Button } from "@aur-ui/ui/components/button";

export default function Page() {
  return <Button>New project</Button>;
}

Components, patterns, hooks, and utilities are importable individually (@aur-ui/ui/components/*, @aur-ui/ui/patterns/*, @aur-ui/ui/hooks/*, @aur-ui/ui/lib/*), so bundlers tree-shake what you don't use.

Owning the source

Prefer to vendor a component instead of importing it? Every docs page has a Source tab with the full, copyable source — paste it into your project and adjust the @aur-ui/ui/* imports to your local paths.