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": {
"@unflowio/ui": "workspace:*",
"@unflowio/tokens": "workspace:*",
"@unflowio/icons": "workspace:*",
"@unflowio/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": {
"@unflowio/ui": ["../../packages/ui/src/index.ts"],
"@unflowio/ui/*": ["../../packages/ui/src/*"],
"@unflowio/icons/*": ["../../packages/icons/src/*"],
"@unflowio/tokens": ["../../packages/tokens/src/index.ts"],
"@unflowio/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: ['@unflowio/ui', '@unflowio/tokens', '@unflowio/icons', '@unflowio/utils'],
};