@aolda/ui

React component kit and Tailwind CSS plugin that ship the Aolda design system for any consumer project.

Features

• Prebuilt, accessible components that wrap common Radix primitives.
• Class variance support for every component via *-variants helpers.
• Tailwind plugin that bundles component layer classes and design tokens.
• Single CSS entry point (@aolda/ui/styles.css) containing theme variables for Tailwind CSS v4.

Installation

pnpm add @aolda/ui

Peer dependencies (react, react-dom, tailwindcss@^4) must already exist in the host app.

Quick start

Update your Tailwind config to load the plugin and point at your source files:

// tailwind.config.ts
import aoldaPlugin from '@aolda/ui/tailwind';

export default {
  content: ['./src/**/*.{ts,tsx,js,jsx}'],
  plugins: [aoldaPlugin],
};

Import the design tokens once near your app root (for example in src/main.tsx):

import '@aolda/ui/styles.css';

Now you can render any component:

import { Button, buttonVariants } from '@aolda/ui';

export function Example() {
  return (
    <Button variant="primary-filled" size="medium">
      Save changes
    </Button>
  );
}

If you want to style non-Button elements (for example a link) with the same visual recipe, use the helper directly:

import Link from 'next/link';
import { buttonVariants } from '@aolda/ui';

export function LinkButton() {
  return (
    <Link href="/settings" className={buttonVariants({ variant: 'primary-outline', size: 'medium' })}>
      Go to settings
    </Link>
  );
}

Tailwind plugin notes

• Component classes are generated from src/tailwind/component-css/*.css and emitted under src/tailwind/generated.
• Running pnpm build (or node scripts/build-component-css.js) refreshes the generated classes and the plugin output inside dist/tailwind.
• The plugin registers component layer styles so consumers do not need to safelist classes or scan node_modules.

Theme tokens

The published styles.css file exposes color palettes, typography tokens, and base layer styles through the @theme block. Tailwind CSS v4 uses these tokens automatically, so utility classes like bg-primary-500, text-content-c4, or border-border are immediately available after the import.

Available components

Button, Badge, Breadcrumb, Checkbox, Dropdown, Indicator, Input, Label, Pagination, Progress, Radio, Search, Tab, Table, Textarea, Toggle.

Each component also exports a *-variants helper to compose class names without JSX, along with strongly typed props meant for React 18+.

Versioning

Releases prior to 0.1.0 (the 0.0.x line) are considered unstable. Starting with 0.1.0 the package follows semantic versioning (SemVer), so breaking changes only ship with new major versions.

Local development

pnpm install
pnpm dev           # build component CSS and watch TypeScript with tsup
pnpm storybook     # run Storybook locally
pnpm build         # produce dist/ and refresh generated Tailwind assets