A blazing fast React + TailwindCSS + React Router Dom + Shadcn UI starter template — ready in 10 seconds!

• Vite 5 - Lightning-fast build tool
• React 19 - Latest React version with SWC compiler
• Tailwind CSS 4 - Modern utility-first CSS framework
• Shadcn/ui - Beautiful and accessible component library
• React Router DOM 7 - Client-side routing
• TypeScript or JavaScript - Choose your preferred language
• Path Aliases - Clean imports with @/ prefix
• VS Code Integration - Auto-configured dev server on folder open
• Clean Setup - Removes unnecessary default files

• Node.js 18+ installed
• npm package manager
• VS Code (optional, for automatic dev server)

Just run:

npx rish

That's it! Your React project will be ready in seconds.

npx rish

The CLI will guide you through:

1. Project name - Enter name or . for current directory
2. Language - Choose TypeScript or JavaScript

When you run the script, it will ask you two questions:

📁 Project name: 

Options:

• Enter a project name (e.g., my-awesome-app) - Creates a new folder
• Enter . (dot) - Installs in the current folder
• If the folder exists - Installs inside it

Examples:

# Create new project
$ npx rish
📁 Project name: my-react-app
# Use current directory
$ npx rish
📁 Project name: .
# Install in existing folder
$ mkdir my-project && npx rish
📁 Project name: my-project

.
├── public/
├── src/
│ ├── components/
│ │ └── ui/
│ │ └── button.tsx # Pre-installed Shadcn component
│ ├── router/
│ │ └── index.tsx # 🎯 Routing lives here
│ ├── App.tsx # Main app component
│ ├── index.css # 🎨 Preloaded with Tailwind
│ └── main.tsx # Entry point
├── .vscode/
│ └── tasks.json # Auto-start dev server
├── tsconfig.json / jsconfig.json # 🔧 With @ alias
├── vite.config.ts # ⚡ Alias + plugins setup
├── components.json # Shadcn/ui config
└── package.json

• ✅ Cleaned - Removed unused App.css
• ✅ Deleted - Default react.svg and vite.svg
• ✅ Configured - @ alias points to ./src
• ✅ Router Ready - Default route / and 404 page pre-added

Import components using the @/ prefix:

// ✅ Clean imports
import { Button } from "@/components/ui/button";
import AppRoutes from "@/router";
// ❌ Instead of
import { Button } from "../../components/ui/button";

Configured with the latest Tailwind CSS 4 syntax:

/* src/index.css */
@import "tailwindcss";

Pre-configured with basic routing:

<Routes>
 <Route path="/" element={<HomePage/>} />
 <Route path="*" element={<div>404 - Page Not Found</div>} />
</Routes>

The script creates .vscode/tasks.json to automatically run npm run dev when you open the project in VS Code.

After setup, you can add more components:

# Add specific components
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add dialog
# See all available components
npx shadcn@latest add

Start the development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

1. Project Setup

   • Asks for project name
   • Creates/navigates to folder

2. Language Selection

   • TypeScript or JavaScript

3. Vite Installation

   • Creates Vite project with React template

4. Package Installation

   • Installs all core dependencies

5. Tailwind Configuration

   • Installs and configures Tailwind CSS 4

6. TypeScript Configuration (if selected)

   • Sets up path aliases
   • Configures strict type checking

7. Vite Configuration

   • Adds path alias support
   • Configures Tailwind plugin

8. Shadcn/ui Setup

   • Initializes Shadcn/ui
   • Adds Button component

9. Router Configuration

   • Installs React Router DOM
   • Creates route structure
   • Configures basic routes

10. Cleanup

    • Removes unnecessary default files

11. VS Code Integration

    • Creates tasks.json for auto-start
    • Opens project in VS Code

Edit src/router/index.tsx:

export default function AppRoutes() {
 return (
 <Routes>
 <Route path="/" element={<HomePage />} />
 <Route path="/about" element={<AboutPage />} />
 <Route path="*" element={<NotFound />} />
 </Routes>
 );
}

Edit vite.config.ts:

export default defineConfig({
 plugins: [
 react(), 
 tailwindcss()
 // Add more plugins here
 ],
});

Delete or modify .vscode/tasks.json:

{
 "runOptions": {
 "runOn": "folderOpen" // Remove this line
 }
}

Install Node.js from nodejs.org

This shouldn't happen with npx, but if it does:

npx clear-npx-cache
npx rish

Vite uses port 5173 by default. Change it in package.json:

{
 "scripts": {
 "dev": "vite --port 3000"
 }
}

Make sure VS Code is using the workspace TypeScript version:

1. Open any .ts/.tsx file
2. Click TypeScript version in bottom right
3. Select "Use Workspace Version"

• NPM Package: npmjs.com/package/rish
• GitHub Repository: github.com/acadbek/rish
• Issues: github.com/acadbek/rish/issues
• Pull Requests: github.com/acadbek/rish/pulls

MIT License - Feel free to use this for any project!

Contributions are welcome! Feel free to:

• Report bugs via Issues
• Suggest new features
• Submit Pull Requests

If you find this tool helpful, please consider:

• ⭐ Starring the GitHub repository
• 🐦 Sharing it with other developers
• 🤝 Contributing to make it better

Made with ❤️ by Acadbek