Getting Started
Monorepo Setup
Using UnflowUI packages inside a Turborepo monorepo with workspace references.
UnflowUI is itself a monorepo. If you're consuming it from another monorepo (e.g. via npm workspaces or pnpm), the setup is straightforward.
Workspace references
Point to the packages using workspace protocol in your consuming package's package.json:
{
"dependencies": {
"@unflow/ui": "workspace:*",
"@unflow-ui/tokens": "workspace:*",
"@unflow-ui/icons": "workspace:*",
"@unflow-ui/utils": "workspace:*"
}
}Build order
UnflowUI packages must be built before your app can consume them. In turbo.json, declare the dependency:
{
"tasks": {
"build": {
"dependsOn": ["^build"]
}
}
}The ^build directive ensures all workspace dependencies are built first.
TypeScript path aliases
For a better local development experience (no need to rebuild after every change), add path aliases in your tsconfig.json:
{
"compilerOptions": {
"paths": {
"@unflow/ui": ["../../packages/ui/src/index.ts"],
"@unflow/ui/*": ["../../packages/ui/src/*"],
"@unflow-ui/icons/*": ["../../packages/icons/src/*"],
"@unflow-ui/tokens": ["../../packages/tokens/src/index.ts"],
"@unflow-ui/utils": ["../../packages/utils/src/index.ts"]
}
}
}Next.js apps
If consuming from a Next.js app, add transpilePackages to your next.config.ts so the TypeScript source is compiled in-place:
const config = {
transpilePackages: ['@unflow/ui', '@unflow-ui/tokens', '@unflow-ui/icons', '@unflow-ui/utils'],
};