Installation

Prerequisites

UnflowUI requires:

• React 19 or later
• Tailwind CSS v4 with PostCSS
• Node.js 20 or later

Install packages

npm install @unflow/ui @unflow-ui/tokens @unflow-ui/icons @unflow-ui/utils

Configure Tailwind

UnflowUI components are styled with Tailwind CSS. Your Tailwind config must scan the package source so its classes aren't purged in production.

/* globals.css */
@import 'tailwindcss';
@source '../../node_modules/@unflow/ui/src/**/*.{ts,tsx}';

Import token CSS variables

The token package ships a CSS file that exposes all design tokens as CSS custom properties (--color-brand-500, etc.). Import it once in your app's root stylesheet or entry point:

import '@unflow-ui/tokens/css';

Set up i18n (optional)

Some components (e.g. Button's loading label) have built-in translations. To enable them, register the UnflowUI resources with your i18next instance:

import i18n from 'i18next';
import { addUnflowResources } from '@unflow/ui/i18n';

addUnflowResources(i18n);

Supported locales: en, pt, es. If you skip this step, components fall back to English strings.

Import a component

Components are available via path imports to keep bundle size minimal:

import { Button } from '@unflow/ui/components/Button';
import { Badge } from '@unflow/ui/components/Badge';