shadcn-alias is a command-line interface (CLI) tool that organizes your shadcn/ui component imports.
It scans your project’s component folder and generates a single ui.ts file. This file re-exports all your shadcn/ui components from one centralized location.
Managing imports can become cumbersome in projects that use many shadcn/ui components. You often end up with a long list of import statements at the top of your files, each pointing to a different component path.
shadcn-alias addresses that issue by creating a single entry point for all UI components, which can simplify your import statements and improve overall code readability.
Features
🔄 Automatic component scanning that detects all shadcn/ui components in your specified directory.
📁 Centralized export generation that creates a single ui.ts file for all component imports.
🎯 Path alias detection that automatically identifies your project’s path configuration from tsconfig.json or jsconfig.json.
🛠️ Flexible command options including input directory specification and output file customization.
✅ Dry run capability through the check command that previews changes without modifying files.
🚀 Global and local installation support for different workflow preferences.
How to use it:
1. Install shadcn-alias. This requires Node.js and npx installed on your system.
npx shadcn-alias2. For those who prefer a global installation, you can install the package using npm.
npm install -g shadcn-alias3. After a global installation, you can run the command directly.
shadcn-alias4. The generate command is the default action. It scans the specified component directory and generates the ui.ts file with all the component exports.
npx shadcn-alias5. The check command performs a dry run. It analyzes your project, detects the component directory and path alias, and prints a summary of what it would generate. This command does not write or modify any files, which makes it safe for verifying your configuration.
npx shadcn-alias check6. You can customize the input and output paths with the following options:
| Option | Alias | Description | Default |
|---|---|---|---|
--input | -i | The directory where your shadcn/ui components are. | components/ui |
--output | -o | The path for the generated ui.ts file. | components/ui.ts |
7. After running the tool, you can change your imports from this:
import { Button } from "@/components/ui/button"
import { Dialog, DialogTrigger } from "@/components/ui/dialog"To a single, clean import statement:
import { Button, Dialog, DialogTrigger } from "@/components/ui"FAQs
Q: Does shadcn-alias work with custom component directories?
A: Yes, you can specify any input directory using the --input flag. The tool will scan whatever directory you specify for component files.
Q: What happens to existing imports when I use shadcn-alias?
A: The tool only generates the centralized export file. You need to manually update your existing import statements to use the new centralized imports.
Q: Can I use shadcn-alias with JavaScript projects?
A: Yes, shadcn-alias works with both TypeScript and JavaScript projects. It will detect your configuration from either tsconfig.json or jsconfig.json files.
Q: How does the tool handle custom hooks like useToast?
A: shadcn-alias exports all files from your components directory, including custom hooks. These become available through the same centralized import system.
Q: What if I have components in subdirectories within the ui folder?
A: The tool recursively scans all subdirectories within your specified input directory and includes all component files in the generated export file.
