dotcn

Simple CLI tool to install shadcn compatible components and manage shadcn compatible UI libraries such as magic-ui, aceternity-ui, hexta-ui, and more.

Table of Contents

• Features

• Usage

• Examples

• Local Development

• Roadmap

• Contributing

• License

Features

• 📦 Install shadcn-compatible components from multiple UI libraries with just one single command, no more dealing with long URLS.
• 🛠️ Supports libraries like magic-ui, aceternity-ui, hexta-ui, kib-ui, and more
• 🧩 Extensible registry system
• 📝 TypeScript support

Usage

1. First initalize dotcn in your project.

[!IMPORTANT] Make sure that you initialize dotcn in the same directory as components.json,

pnpm dlx dotcn@latest init
# optionally you can specify a directory using -c or --cwd, by default it uses current directory.

1. Now add registries such as magic-ui aceternity-ui etc...
   For that you need two things :
   1. name will be used as unique identifier.
   2. URL of that registry where it's components are hosted.

pnpm dlx dotcn@latest registries add magic-ui https://magicui.design/r/

1. You can now add any component from magic-ui by just mentioning it's name,

   pnpm dlx dotcn@latest add magic-ui marquee # adds the marquee component from magic-ui

2. Optionally you can mark magic-ui as default, so that you don't have to repeatedly specify it.

   pnpm dlx dotcn@latest mark-default magic-ui

   Then you can just:

   pnpm dlx dotcn@latest add marquee

   It will copy the marquee component into your project.

You no longer have to remember all those long URLs, just add any registry and then install it like dotcn add <registry> <component>

Available Commands

• init — Initalize a registries.json in your project.
• add — Add a component from registry
• registries — Manage registries (add, remove, list, mark-default, etc.)

  Options

• --help — Show help for a command
• --version — Show CLI version

Examples

Add a Component

dotcn add magic-ui marquee

Add a New Registry

dotcn registries add kibo-ui https://www.kibo-ui.com/registry/

Remove a Registry

dotcn registries remove magic-ui

Local Development

1. Fork this Repo
2. Clone the repository:

   git clone https://github.com/atybdot/dotcn.git
   cd dotcn

3. Install dependencies:

   pnpm install
   # or
   npm install

4. change branch to your feature-title

   git checkout -b <feature>

5. Run in development mode:

   pnpm dev
   # or
   npm run dev

6. Build for production:

   pnpm build
   # or
   npm run build

7. Lint & Format:

   pnpm lint
   pnpm format
   pnpm check

8. Push Code to Github

   git push origin <feature>

9. Open Pull Request

Roadmap

• <input disabled="" type="checkbox"> Add search command — Allow users to search famous registries (magic-ui, kib-ui, hexta-ui, etc.) directly from the CLI
• <input disabled="" type="checkbox"> Add command to list installed registries
• <input disabled="" type="checkbox"> Add import/export finctionality
• <input disabled="" type="checkbox"> Refactor codebase — Improve developer experience and clean up code

Contributing

Contributions are welcome! Please open issues and pull requests to help improve dotcn.

License

MIT © @atybdot