Installation

Add the package, enable transpilation, scan Tailwind over the library, and align CSS variables. Same steps we use internally.

One-command install

From your project root (npm, pnpm, or yarn — shown with npm):

npm install @payglocal_ui/flux-ui

Peer dependencies: react and react-dom (18+ or 19+).

Next.js

Transpile the workspace package so App Router can compile TypeScript source exports:

// next.config.ts
const nextConfig = {
  transpilePackages: ["@flux/ui"],
};
export default nextConfig;

Tailwind v4

Tailwind must see class names used inside @flux/ui:

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

@source "../node_modules/@flux/ui/src/**/*.{ts,tsx}";
/* Monorepo: @source is resolved from this file's folder. */
/* Root Next app (globals.css in /app): */
/* @source "../packages/flux-ui/src/**/*.{ts,tsx}"; */
/* Nested app e.g. apps/docs/app/globals.css — three levels to repo root: */
/* @source "../../../packages/flux-ui/src/**/*.{ts,tsx}"; */

@custom-variant dark (&:where(.dark, .dark *));

Design tokens

Mirror semantic variables from the Flux repo — preferably import the theme CSS after Tailwind (same as the dashboard and this docs app): --background, --foreground, --card, --border, --primary, --ring, --chart-1 … --chart-5, motion tokens, sidebar/header chrome, etc.

The canonical source is the theme CSS in the monorepo (see CSS_PARITY.md for how product and docs stay aligned).

Monorepo / workspace

Use @flux/ui: "workspace:*" (or file:../../packages/flux-ui) and keep @source pointed at the package src directory. Run install from the repo root so dependencies hoist correctly.