-
Notifications
You must be signed in to change notification settings - Fork 55
Description
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.