Description
The ui.config.json file allows configuring aliases, but these aliases control where components are generated rather than what import paths are used within the generated components.
Current Behavior
When setting aliases in ui.config.json:
{
"aliases": {
"components": "src/components",
"utils": "src/utils"
}
}
- ✅ Components are created in
src/components/
- ❌ Components use
src/ imports internally (e.g., import { cn } from "src/utils")
If you change the alias to use a package-scoped path:
{
"aliases": {
"components": "@mypackage/ui/src/components",
"utils": "@mypackage/ui/src/utils"
}
}
- ❌ Components are created in
@mypackage/ui/src/components/ folder literally
- ❌ Components use
@mypackage/ui/src/ imports internally (e.g., import { cn } from "@mypackage/ui/src/utils")
Expected Behavior
There should be a way to configure:
- Output location (where components are created)
- Import alias (what import paths are used within components)
These should be separate configurations:
{
"aliases": {
"components": "src/components",
"utils": "src/utils"
},
"importPrefix": "@mypackage/ui/"
}
Or alternatively:
{
"output": {
"components": "src/components",
"utils": "src/utils"
},
"aliases": {
"components": "@mypackage/ui/src/components",
"utils": "@mypackage/ui/src/utils"
}
}
Use Case
When building a shared UI package consumed by multiple apps:
packages/
ui/ # Shared component library
src/
components/
utils/
apps/
web/ # Consumer app
src/ # Has its own src/ folder
Generated components with import { cn } from "src/utils" fail in the web app because it resolves to apps/web/src/utils instead of packages/ui/src/utils.
Workarounds
Currently, the only solutions are:
- Manually change all imports to relative paths (
../utils)
- Manually change all imports to package-scoped paths (
@mypackage/ui/src/utils)
- Build the package and don't distribute source files
All of these defeat the purpose of using the CLI to generate components.
Proposed Solution
Add support for configuring import paths separately from output paths, allowing generated components to use package-scoped imports or custom aliases that work in monorepo setups.
Description
The
ui.config.jsonfile allows configuring aliases, but these aliases control where components are generated rather than what import paths are used within the generated components.Current Behavior
When setting aliases in
ui.config.json:{ "aliases": { "components": "src/components", "utils": "src/utils" } }src/components/src/imports internally (e.g.,import { cn } from "src/utils")If you change the alias to use a package-scoped path:
{ "aliases": { "components": "@mypackage/ui/src/components", "utils": "@mypackage/ui/src/utils" } }@mypackage/ui/src/components/folder literally@mypackage/ui/src/imports internally (e.g.,import { cn } from "@mypackage/ui/src/utils")Expected Behavior
There should be a way to configure:
These should be separate configurations:
{ "aliases": { "components": "src/components", "utils": "src/utils" }, "importPrefix": "@mypackage/ui/" }Or alternatively:
{ "output": { "components": "src/components", "utils": "src/utils" }, "aliases": { "components": "@mypackage/ui/src/components", "utils": "@mypackage/ui/src/utils" } }Use Case
When building a shared UI package consumed by multiple apps:
Generated components with
import { cn } from "src/utils"fail in thewebapp because it resolves toapps/web/src/utilsinstead ofpackages/ui/src/utils.Workarounds
Currently, the only solutions are:
../utils)@mypackage/ui/src/utils)All of these defeat the purpose of using the CLI to generate components.
Proposed Solution
Add support for configuring import paths separately from output paths, allowing generated components to use package-scoped imports or custom aliases that work in monorepo setups.