Skip to content

Cannot configure import alias for generated components #198

@JavanPoirier

Description

@JavanPoirier

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:

  1. Output location (where components are created)
  2. 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:

  1. Manually change all imports to relative paths (../utils)
  2. Manually change all imports to package-scoped paths (@mypackage/ui/src/utils)
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions