Installation

Flow UI runs on React 19 + Tailwind v4. Set up both before installing.

Install

bun add @flow-industries/ui
bun add -D tailwindcss @tailwindcss/vite

Peer dependencies:

• react ≥ 19
• react-dom ≥ 19
• tailwindcss ≥ 4

Vite config

Add the Tailwind plugin to Vite:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), /* ...other plugins */],
});

CSS imports

Create a single stylesheet (e.g. app.css) and import the three Flow UI stylesheets in this exact order, followed by a @source directive so Tailwind scans Flow UI's TSX:

@import "@flow-industries/ui/styles/tokens.css";
@import "@flow-industries/ui/styles/base.css";
@import "@flow-industries/ui/styles/fonts.css";

@source "../../node_modules/@flow-industries/ui/src";

Import this stylesheet from your app entry:

import "./app.css";

Why the order matters

1. tokens.css defines the @theme block that declares every Flow CSS variable. Tailwind needs these at parse time.
2. base.css applies the Tailwind @import + base layer resets.
3. fonts.css registers @font-face rules for Geist. Importing it after base.css lets the fonts win over any baseline typography reset.

Swapping this order usually produces invisible bugs — wrong fonts, broken dark mode, missing token values.

Source directive

The @source line is load-bearing. Tailwind v4 only generates utility classes for class names it can see; Flow UI's TSX files live in node_modules, which Tailwind skips by default. Pointing @source at them fixes that.

Adjust the path so it resolves from the CSS file's location. In a monorepo with hoisted deps:

@source "../../../node_modules/@flow-industries/ui/src";

In a single-package app with deps in the local node_modules:

@source "./node_modules/@flow-industries/ui/src";

Importing components

import { Button } from "@flow-industries/ui/components/button";
import { Dialog, DialogTrigger, DialogContent } from "@flow-industries/ui/components/dialog";
import { cn } from "@flow-industries/ui";
import { Logo, Logomark } from "@flow-industries/ui/logo";
import { XIcon } from "@flow-industries/ui/icons";

Every component has its own subpath under @flow-industries/ui/components/* so imports tree-shake. The @flow-industries/ui/components barrel re-exports most components if you prefer a single import site, but a handful — typography, combobox, native-select, validated-input, animated-icons, color-swatch, direction — are only reachable via their per-file subpath.

Dark mode

Flow UI ships both palettes. Toggle by adding or removing class="dark" on <html>:

document.documentElement.classList.toggle("dark");

See Theming for custom palettes.

Next

• Tokens — every CSS variable.
• Typography — Geist families and text scales.
• Components → Buttons — the first component page.