create-vite-shadcn

A CLI that scaffolds a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project with a modular architecture — no manual config needed.

Features

• Modular Architecture - Organized project structure with modules, stores, hooks, services
• MobX State Management - Built-in reactive state management
• React Router - Full routing setup with auto-generated routes
• i18n Support - Internationalization with English and French
• shadcn/ui - Beautiful, accessible components
• TypeScript - Full type safety out of the box

Quick Start

Run directly (no install needed)

npx create-vite-shadcn

Or install globally

npm install -g create-vite-shadcn
create-vite-shadcn

CLI Commands

Create a new project

npx create-vite-shadcn

The CLI will prompt you for:

| Prompt | Description | Default | |--------|-------------|---------| | Project name | Name of your project | my-vite-app | | Base color | shadcn/ui color theme | Neutral | | Add Button component | Include starter Button | Yes | | Initial module | Create a starter module | (optional) | | Run dev server | Start dev server after | No |

Add a new module

Adds a complete module with stores, pages, hooks, services, and auto-updates routes.

cd my-project
npx create-vite-shadcn add-module
# or with alias
npx create-vite-shadcn add
npx create-vite-shadcn a

You'll be prompted for the module name (e.g., dashboard, settings, users).

List all modules

Shows all created modules in your project.

npx create-vite-shadcn list-modules
# or with alias
npx create-vite-shadcn ls
npx create-vite-shadcn list

Create component in a module

Create pages, stores, hooks, services, or types within an existing module.

npx create-vite-shadcn create <type> <name>
# or with alias
npx create-vite-shadcn c <type> <name>

Types:

• page - React page component
• store - MobX store
• hook - Custom React hook
• service - API service
• types - TypeScript interfaces

Example:

npx create-vite-shadcn c page user-profile
npx create-vite-shadcn c store user
npx create-vite-shadcn c hook useUserData
npx create-vite-shadcn c service user
npx create-vite-shadcn c types user

Initialize existing project

Add modular structure to an existing Vite + React project.

cd my-existing-project
npx create-vite-shadcn init
# or with alias
npx create-vite-shadcn i

This will:

• Install all required dependencies (MobX, React Router, i18n, etc.)
• Create the modular project structure
• Configure Tailwind CSS v4
• Initialize shadcn/ui

Project Structure

After scaffolding, your project will look like:

my-app/
├── public/
├── src/
│   ├── modules/              # Feature modules
│   │   ├── home/
│   │   │   ├── components/   # Page components
│   │   │   │   └── home-page.tsx
│   │   │   ├── stores/       # MobX stores
│   │   │   │   └── home-store.ts
│   │   │   ├── hooks/        # Custom hooks
│   │   │   │   └── use-home.ts
│   │   │   ├── services/     # API services
│   │   │   │   └── home-service.ts
│   │   │   ├── types/        # TypeScript types
│   │   │   │   └── index.ts
│   │   │   └── index.ts      # Module exports
│   │   └── auth/             # Another module
│   │       └── ...
│   ├── stores/               # Global store setup
│   │   ├── rootStore.ts      # Root store
│   │   └── index.ts          # Store provider & hooks
│   ├── components/           # Shared components
│   │   └── ui/               # shadcn/ui components
│   ├── hooks/                # Shared hooks
│   ├── services/             # Shared services
│   ├── utils/                # Utilities (cn helper)
│   ├── i18n/                 # Internationalization
│   │   ├── locales/
│   │   │   ├── en.json
│   │   │   └── fr.json
│   │   └── index.ts
│   ├── App.tsx               # Root component
│   ├── main.tsx              # Entry point
│   ├── routes.tsx            # Route definitions
│   └── index.css             # Tailwind + CSS variables
├── vite.config.ts
├── tsconfig.json
├── components.json           # shadcn/ui config
├── .eslintrc.json
├── .prettierrc
└── package.json

Note: Files use kebab-case naming (e.g., home-page.tsx, home-store.ts)

Installed Dependencies

Core

• react - UI library
• react-dom - React DOM rendering
• react-router-dom - Routing

State Management

• mobx - State management
• mobx-react-lite - React bindings for MobX

Styling

• tailwindcss - Utility-first CSS
• @tailwindcss/vite - Vite plugin for Tailwind
• clsx - Conditional classes
• tailwind-merge - Merge Tailwind classes

i18n

• i18next - Internationalization
• react-i18next - React bindings

UI

• lucide-react - Icons
• shadcn/ui components

Usage Examples

Adding a new feature module

# 1. Create the module
npx create-vite-shadcn add-module
# Enter: users

# 2. The module is created with:
#    - /src/modules/users/components/UsersPage.tsx
#    - /src/modules/users/stores/UsersStore.ts
#    - /src/modules/users/hooks/useUsers.ts
#    - /src/modules/users/services/usersService.ts
#    - /src/modules/users/types/index.ts

# 3. Route is auto-added at /users

Using MobX stores

// In any component
import { useStore } from "@/stores";

function MyComponent() {
  const store = useStore();
  
  // Access module stores
  // store.users.data
  // store.users.loading
  
  return <div>...</div>;
}

Using module hooks

// In a page component
import { useUsers } from "../hooks/useUsers";

export default function UsersPage() {
  const { data, loading, error, refetch } = useUsers();
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <div>
      {data.map(user => <div key={user.id}>{user.name}</div>)}
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

Adding shadcn components

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add input
npx shadcn@latest add form

Using i18n

import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();
  
  return <h1>{t("app.welcome")}</h1>;
}

Switch language:

import i18n from "./i18n";

i18n.changeLanguage("fr"); // Switch to French

Configuration

Path Aliases

The project is configured with @/ as an alias for src/:

// Instead of ../../components
import { Button } from "@/components/ui/button";
import { cn } from "@/utils/cn";

Tailwind CSS v4

Uses the latest Tailwind CSS v4 with CSS variables for theming.

Requirements

• Node.js ≥ 18
• npm ≥ 7

After Scaffolding

cd my-vite-app
npm run dev

Then open http://localhost:5173

License

MIT