Installation

Get up and running with Tac UI in your React project.

1. Install packages

Tac UI is published as a monorepo with separate token and component packages.

bash

pnpm add @tac-ui/web @tac-ui/tokens @tac-ui/icon

2. Configure Tailwind CSS

Tac UI uses Tailwind CSS v4. Import the theme CSS generated from design tokens in your main stylesheet.

css

/* globals.css */
@import "tailwindcss";
@config "./tailwind.config.ts";

In your Tailwind config, use the Tac UI preset:

typescript

// tailwind.config.ts
import type { Config } from 'tailwindcss';
import { tacPreset } from '@tac-ui/web/tailwind';
import { generateCSSVariables } from '@tac-ui/tokens/web';
import plugin from 'tailwindcss/plugin';

const tacThemePlugin = plugin(({ addBase }) => {
  const lightVars = generateCSSVariables('light');
  const darkVars = generateCSSVariables('dark');
  addBase({
    ':root': lightVars,
    '[data-theme="light"]': lightVars,
    '[data-theme="dark"]': darkVars,
    '@media (prefers-color-scheme: dark)': {
      ':root:not([data-theme="light"])': darkVars,
    },
  });
});

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@tac-ui/web/dist/**/*.{js,mjs}',
  ],
  presets: [tacPreset],
  plugins: [tacThemePlugin],
};

export default config;

3. Add the Provider

Wrap your application root with TacProvider to enable theming and CSS variable injection.

tsx

import { TacProvider } from '@tac-ui/web';

export default function App({ children }) {
  return (
    <TacProvider defaultTheme="light">
      {children}
    </TacProvider>
  );
}

4. Use Components

Import and use any component. All components support ref forwarding, className overrides via tailwind-merge, and full TypeScript type inference.

tsx

import { Button, Input, Card, CardHeader, CardTitle } from '@tac-ui/web';

export function LoginForm() {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Sign In</CardTitle>
      </CardHeader>
      <div className="p-6 space-y-4">
        <Input label="Email" placeholder="[email protected]" />
        <Input label="Password" type="password" />
        <Button className="w-full">Sign In</Button>
      </div>
    </Card>
  );
}

5. Customize Design Tokens

All visual styles in Tac UI are driven by CSS custom properties (design tokens). You can override any token to match your brand without modifying the source. See the Customization guide for the full list of available tokens and advanced techniques.

css

/* Override tokens in your globals.css */
:root {
  --primary: #96784A;        /* warm amber instead of blue fusion */
  --primary-hover: #84693C;
  --radius-m: 0.75rem;       /* rounder corners */
}

Project Structure

The monorepo is organized into three packages:

@tac-ui/shared # Shared types (ThemeMode, etc.)

@tac-ui/tokens # Design tokens + CSS variable generator

@tac-ui/web # React components + Tailwind preset