⚡ Vite Kit

Vite Kit is a CLI tool that is used to kick-start your modern frontend Vite + React + Tailwind CSS project instantly.

🚀 Available Configurations

• Set up Vite with React

• Supports both Typescript and Javascript

• Tailwind CSS v4 (Optional)

• File Based Routing - New (Optional)

• React Router v6+ with starter routes (Optional)

• Lucide Icons (lightweight, customizable SVG icons) (Optional)

• Supports npm, pnpm, yarn, and bun package managers

🛠 Installation

Either install globally

npm i @iamvkr/vite-kit -g

# usage
@iamvkr/vite-kit

Or use via npx

npx @iamvkr/vite-kit

🛠 Usage

CLI to create a new project.

# npx
npx @iamvkr/vite-kit

# pnpm
pnpm dlx @iamvkr/vite-kit

#yarn
yarn dlx @iamvkr/vite-kit

#bun
bunx @iamvkr/vite-kit

Then follow the prompts:

√ Enter your project name ... my-new-project
√ Choose a package manager » pnpm
√ Do you want to use typescript? ... yes
√ Do you want to install tailwind css? ... yes
√ Do you want to install react-router-dom? ... yes
√ Do you want to use file based routing? ... yes
√ Do you want to install lucide-react icons? ... yes
√ Open project in browser after starting? ...no

After installation, follow the instructions to run the app

✅ Setup complete!

👉 What It Does

1. Creates a Vite + React project with your provided name
2. Installs and configures:
   • tailwindcss v4 (if selected)
   • react-router-dom (if selected)
   • lucide-react (if selected)
3. Generates:
   • src/routes.ts — (if file based routing selected)
   • src/pages/index.ts — (if file based routing selected)
   • App.tsx — setup based on choices
   • Lucide icons — (if file selected)

📁 File Based Routing

Implemeted a file based (pages of Next js) like Routing Based on this blog to keep routing simple and cleaner.

Example Routes:

• /pages/index.tsx => "/"
• /pages/about.tsx => "/about"
• /pages/posts/index.tsx => "/post"
• /pages/posts/post1.tsx => "/post/post1"
• /pages/dynamicRoute/[username]/index.tsx => "/dynamicRoute/userName/"

Author:

📜 License

MIT

🎉 Happy Hacking!