Simple CLI tool to install shadcn compatible components and manage shadcn compatible UI libraries such as magic-ui, aceternity-ui, hexta-ui, and more.
- 📦 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
- 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.
- Now add registries such as magic-ui aceternity-ui etc...
For that you need two things :- name will be used as unique identifier.
- URL of that registry where it's components are hosted.
pnpm dlx dotcn@latest registries add magic-ui https://magicui.design/r/
- 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
- 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>
init
— Initalize aregistries.json
in your project.add
— Add a component from registryregistries
— Manage registries (add
,remove
,,list
mark-default
, etc.)
--help
— Show help for a command--version
— Show CLI version
dotcn add magic-ui marquee
dotcn registries add kibo-ui https://www.kibo-ui.com/registry/
dotcn registries remove magic-ui
- Fork this Repo
- Clone the repository:
git clone https://github.com/atybdot/dotcn.git
cd dotcn
- Install dependencies:
pnpm install
# or
npm install
- change branch to your feature-title
git checkout -b <feature>
- Run in development mode:
pnpm dev
# or
npm run dev
- Build for production:
pnpm build
# or
npm run build
- Lint & Format:
pnpm lint
pnpm format
pnpm check
- Push Code to Github
git push origin <feature>
- Add search command — Allow users to search famous registries (magic-ui, kib-ui, hexta-ui, etc.) directly from the CLI
- Add command to list installed registries
- Add import/export finctionality
- Refactor codebase — Improve developer experience and clean up code
Contributions are welcome! Please open issues and pull requests to help improve dotcn.
MIT © @atybdot