CalmUI is a powerful CLI tool for modern frontend development. It guarantees a clean, scalable, and opinionated project structure from day one, streamlining developer workflows and supporting long-term code quality.
Ever spent half an hour in a group call debating if it should be components or Components, home or HomePage, only to discover three different folder structures by the end of sprint?
CalmUI ends the chaos.
With project structure, templates, and module files handled for you, you can finally spend less time renaming folders—and more time shipping code.
- Automated, consistent project structure for React (Vite, Next.js) and more.
- Custom scaffolding for modules/routes—never worry about file/folder conventions again.
- Framework-aware: detects and adapts to Vite, Next.js, etc.
- Dynamic route generation supporting nested and parameterized routes.
- Pre configured templates like blank template, admin template (Currently these two are available).
- TypeScript-first setup with zero-config ESM/JS switching.
- Edge case handling: guards against accidental overwrites and misconfiguration.
- Easy extensibility—add your own templates as your needs grow!
Install CalmUI globally via npm:
npm install -g calmui(Or use npx calmui ... for one-off commands without installation.)
Create a new project in a specific folder:
calmui init my-projectOr initialize a project in the current directory (checks if folder is empty and prompts accordingly):
calmui initDuring initialization, you’ll be prompted to select a framework:
Vite(with Tanstack Router + Tailwind by default)Next.js(with Tailwind)- (React Native—coming soon)
A local calmui.json will be created to store scaffolding config.
CalmUI lets you add new routes or modules with a single command, keeping your folder structure consistent.
Generate a basic route:
calmui generate-route /my-routeAfter executing the command you'll see that folder specific files are created.
Generate a dynamic route:
calmui generate-route /my-route/:idAdvanced routes/nesting examples:
calmui generate-route /my-route/:id/edit
calmui generate-route /product-details/:slug
calmui generate-route /users/accounts/orders/:id/:status/update
calmui generate-route "/(auth)/sign-up" # for routes with route groups
calmui generate-route "/(authenticated)/orders/:orderId" # for routes with route groups- Generates boilerplate, folder structure, and pre-wired modules for each part of the route.
- Works seamlessly for both Vite and Next.js projects.
- Route migration
- Install CalmUI globally (or use
npx). - Run
calmui initto start a new project—pick your stack with the arrow keys. - Use
calmui generate-routeas needed to build out your app—no more worrying about folder or page naming. - Let CalmUI handle your scaffolds, configs, and structure—focus on real features.
Want to add framework support, templating logic, or new generators? PRs are welcome! See the CONTRIBUTING.md for details.
- Node.js v18+
- Works on macOS, Linux, and Windows
Q: Do I need to use TypeScript?
A: TypeScript is the default, but CalmUI supports ESM JS output if required.
Q: Can I use CalmUI in an existing (non-empty) folder?
A: Yes, but you’ll be prompted to confirm or clean up the folder first.
If you face any kind of problem, unexpected behavior please create an issue. We will try to resolve it as soon as possible.
- Rajdip Mondal For the initial inspiration.