{"_id":"@ayoub-sahraoui/create-vite-shadcn","_rev":"4-206551446d47fecaf29f7e2516551eb1","name":"@ayoub-sahraoui/create-vite-shadcn","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.1":{"name":"@ayoub-sahraoui/create-vite-shadcn","version":"0.0.1","keywords":["vite","shadcn","react","typescript","tailwind","cli","scaffold"],"license":"MIT","_id":"@ayoub-sahraoui/create-vite-shadcn@0.0.1","maintainers":[{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"}],"bin":{"create-vite-shadcn":"src/index.js"},"dist":{"shasum":"50267ae1d1a1ef7eedce8892728f8be44c6e12a8","tarball":"https://registry.npmjs.org/@ayoub-sahraoui/create-vite-shadcn/-/create-vite-shadcn-0.0.1.tgz","fileCount":3,"integrity":"sha512-fAH3Lq3fKWqBDJ4Ydxuq+OfAgTGHcKSmJoZ7+rDO0xhFQ0RuA3xDggV8I9C3Dwh7FB/fgBjeMRpSY3i+5KsOTQ==","signatures":[{"sig":"MEUCIDp9E1Z/rZBJ0EElQ1T3TmSSUiDhKXWPDNQfH1iS2ADRAiEAr15kv5Vcz1oUk5gEqs0edvfQ7NXbpkVHkI3fw91EfNs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12287},"main":"src/index.js","type":"module","engines":{"node":">=18.0.0"},"scripts":{"start":"node src/index.js"},"_npmUser":{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"},"_npmVersion":"11.6.2","description":"CLI to scaffold a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project","directories":{},"_nodeVersion":"24.1.0","dependencies":{"ora":"^8.0.1","chalk":"^5.3.0","execa":"^9.3.0","prompts":"^2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/create-vite-shadcn_0.0.1_1771887225223_0.698990955663592","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ayoub-sahraoui/create-vite-shadcn","version":"0.0.2","keywords":["vite","shadcn","react","typescript","tailwind","cli","scaffold"],"license":"MIT","_id":"@ayoub-sahraoui/create-vite-shadcn@0.0.2","maintainers":[{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"}],"bin":{"create-vite-shadcn":"src/index.js"},"dist":{"shasum":"762bbb855a0a85a7a3b82d38ae2b080643430337","tarball":"https://registry.npmjs.org/@ayoub-sahraoui/create-vite-shadcn/-/create-vite-shadcn-0.0.2.tgz","fileCount":3,"integrity":"sha512-vTNNOpKUXOqm5CtN0NmFouvtZAQ5wkiFkTBNKogHr5SbuerlLbf8lfmcwYtaKefvWj5n5/hYT667PvGJhBa4EA==","signatures":[{"sig":"MEYCIQCTdzdnaUSUIF+KJNw0H6dTBozXSHWKbtqJiR+SH27v+AIhAK38R44NbzalXldklJooJP97M2r7SOsN5m84bRIAmkSM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13098},"main":"src/index.js","type":"module","engines":{"node":">=18.0.0"},"scripts":{"start":"node src/index.js"},"_npmUser":{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"},"_npmVersion":"11.6.2","description":"CLI to scaffold a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project","directories":{},"_nodeVersion":"24.1.0","dependencies":{"ora":"^8.0.1","chalk":"^5.3.0","execa":"^9.3.0","prompts":"^2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/create-vite-shadcn_0.0.2_1771887773853_0.4123395241817014","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@ayoub-sahraoui/create-vite-shadcn","version":"0.0.4","keywords":["vite","shadcn","react","typescript","tailwind","cli","scaffold"],"license":"MIT","_id":"@ayoub-sahraoui/create-vite-shadcn@0.0.4","maintainers":[{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"}],"bin":{"create-vite-shadcn":"src/index.js"},"dist":{"shasum":"f0b1348f8c23a2761a4d64b61272d49659ae73ca","tarball":"https://registry.npmjs.org/@ayoub-sahraoui/create-vite-shadcn/-/create-vite-shadcn-0.0.4.tgz","fileCount":3,"integrity":"sha512-pTHPEhyvB8FEffMreWKXcD40T2yS6500tqr+nRf1o0+lV3raAWSKqSGwH8KPkng/Rt7F2P6/8vXCBrw/hUhgIw==","signatures":[{"sig":"MEUCIQCrpJFYR140I1w+1CNCWdzejBT6/lxSOXYXd5P64hcqMQIgQ1aJ7SuGsWQQdCvmB2OizodW76iBDyQcexiGEwWP4eE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13115},"main":"src/index.js","type":"module","engines":{"node":">=18.0.0"},"scripts":{"start":"node src/index.js"},"_npmUser":{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"},"_npmVersion":"11.6.2","description":"CLI to scaffold a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project","directories":{},"_nodeVersion":"24.1.0","dependencies":{"ora":"^8.0.1","chalk":"^5.3.0","execa":"^9.3.0","prompts":"^2.4.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/create-vite-shadcn_0.0.4_1771888916773_0.697460350367177","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@ayoub-sahraoui/create-vite-shadcn","version":"0.0.5","description":"CLI to scaffold a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project","type":"module","main":"src/index.js","bin":{"create-vite-shadcn":"src/index.js"},"scripts":{"start":"node src/index.js"},"dependencies":{"chalk":"^5.3.0","execa":"^9.3.0","ora":"^8.0.1","prompts":"^2.4.2"},"keywords":["vite","shadcn","react","typescript","tailwind","cli","scaffold"],"license":"MIT","engines":{"node":">=18.0.0"},"publishConfig":{"access":"public"},"gitHead":"e86f7f86ce8a4c80212f1ef3e3806ac0ce4b335e","_id":"@ayoub-sahraoui/create-vite-shadcn@0.0.5","_nodeVersion":"24.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-p/S0Jp3TTMmIjbwwlEyYv+5f6K50VtD/FaaxPfsDMJVesWz/cXU2MQv/ykFUoEtH5hpKC+Nm7dL6EVaNP59VIQ==","shasum":"af28ec5e78e3b7c4d47a7f747b386e5a18be27aa","tarball":"https://registry.npmjs.org/@ayoub-sahraoui/create-vite-shadcn/-/create-vite-shadcn-0.0.5.tgz","fileCount":32,"unpackedSize":425511,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICE5NP0ZS2+SQqRMXYgwPlC9nBE8QNYZGUCC/i+GlUUAAiBKyMQH8YCN633ACV6BmJbWGyHvSiV0FzzZXvb8h1veRA=="}]},"_npmUser":{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"},"directories":{},"maintainers":[{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/create-vite-shadcn_0.0.5_1771965436524_0.6215805350045027"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T22:53:45.147Z","modified":"2026-02-24T20:37:16.783Z","0.0.1":"2026-02-23T22:53:45.364Z","0.0.2":"2026-02-23T23:02:53.979Z","0.0.4":"2026-02-23T23:21:56.886Z","0.0.5":"2026-02-24T20:37:16.665Z"},"license":"MIT","keywords":["vite","shadcn","react","typescript","tailwind","cli","scaffold"],"description":"CLI to scaffold a Vite + React + TypeScript + Tailwind CSS + shadcn/ui project","maintainers":[{"name":"ayoub-sahraoui","email":"ayoub.sahraoui.pro@gmail.com"}],"readme":"# create-vite-shadcn\n\nA CLI that scaffolds a **Vite + React + TypeScript + Tailwind CSS + shadcn/ui** project with a modular architecture — no manual config needed.\n\n## Features\n\n- **Modular Architecture** - Organized project structure with modules, stores, hooks, services\n- **MobX State Management** - Built-in reactive state management\n- **React Router** - Full routing setup with auto-generated routes\n- **i18n Support** - Internationalization with English and French\n- **shadcn/ui** - Beautiful, accessible components\n- **TypeScript** - Full type safety out of the box\n\n## Quick Start\n\n### Run directly (no install needed)\n\n```bash\nnpx create-vite-shadcn\n```\n\n### Or install globally\n\n```bash\nnpm install -g create-vite-shadcn\ncreate-vite-shadcn\n```\n\n## CLI Commands\n\n### Create a new project\n\n```bash\nnpx create-vite-shadcn\n```\n\nThe CLI will prompt you for:\n\n| Prompt | Description | Default |\n|--------|-------------|---------|\n| Project name | Name of your project | my-vite-app |\n| Base color | shadcn/ui color theme | Neutral |\n| Add Button component | Include starter Button | Yes |\n| Initial module | Create a starter module | (optional) |\n| Run dev server | Start dev server after | No |\n\n### Add a new module\n\nAdds a complete module with stores, pages, hooks, services, and auto-updates routes.\n\n```bash\ncd my-project\nnpx create-vite-shadcn add-module\n# or with alias\nnpx create-vite-shadcn add\nnpx create-vite-shadcn a\n```\n\nYou'll be prompted for the module name (e.g., `dashboard`, `settings`, `users`).\n\n### List all modules\n\nShows all created modules in your project.\n\n```bash\nnpx create-vite-shadcn list-modules\n# or with alias\nnpx create-vite-shadcn ls\nnpx create-vite-shadcn list\n```\n\n### Create component in a module\n\nCreate pages, stores, hooks, services, or types within an existing module.\n\n```bash\nnpx create-vite-shadcn create <type> <name>\n# or with alias\nnpx create-vite-shadcn c <type> <name>\n```\n\n**Types:**\n- `page` - React page component\n- `store` - MobX store\n- `hook` - Custom React hook\n- `service` - API service\n- `types` - TypeScript interfaces\n\n**Example:**\n\n```bash\nnpx create-vite-shadcn c page user-profile\nnpx create-vite-shadcn c store user\nnpx create-vite-shadcn c hook useUserData\nnpx create-vite-shadcn c service user\nnpx create-vite-shadcn c types user\n```\n\n### Initialize existing project\n\nAdd modular structure to an existing Vite + React project.\n\n```bash\ncd my-existing-project\nnpx create-vite-shadcn init\n# or with alias\nnpx create-vite-shadcn i\n```\n\nThis will:\n- Install all required dependencies (MobX, React Router, i18n, etc.)\n- Create the modular project structure\n- Configure Tailwind CSS v4\n- Initialize shadcn/ui\n\n## Project Structure\n\nAfter scaffolding, your project will look like:\n\n```\nmy-app/\n├── public/\n├── src/\n│   ├── modules/              # Feature modules\n│   │   ├── home/\n│   │   │   ├── components/   # Page components\n│   │   │   │   └── home-page.tsx\n│   │   │   ├── stores/       # MobX stores\n│   │   │   │   └── home-store.ts\n│   │   │   ├── hooks/        # Custom hooks\n│   │   │   │   └── use-home.ts\n│   │   │   ├── services/     # API services\n│   │   │   │   └── home-service.ts\n│   │   │   ├── types/        # TypeScript types\n│   │   │   │   └── index.ts\n│   │   │   └── index.ts      # Module exports\n│   │   └── auth/             # Another module\n│   │       └── ...\n│   ├── stores/               # Global store setup\n│   │   ├── rootStore.ts      # Root store\n│   │   └── index.ts          # Store provider & hooks\n│   ├── components/           # Shared components\n│   │   └── ui/               # shadcn/ui components\n│   ├── hooks/                # Shared hooks\n│   ├── services/             # Shared services\n│   ├── utils/                # Utilities (cn helper)\n│   ├── i18n/                 # Internationalization\n│   │   ├── locales/\n│   │   │   ├── en.json\n│   │   │   └── fr.json\n│   │   └── index.ts\n│   ├── App.tsx               # Root component\n│   ├── main.tsx              # Entry point\n│   ├── routes.tsx            # Route definitions\n│   └── index.css             # Tailwind + CSS variables\n├── vite.config.ts\n├── tsconfig.json\n├── components.json           # shadcn/ui config\n├── .eslintrc.json\n├── .prettierrc\n└── package.json\n```\n\n> **Note:** Files use kebab-case naming (e.g., `home-page.tsx`, `home-store.ts`)\n\n## Installed Dependencies\n\n### Core\n- `react` - UI library\n- `react-dom` - React DOM rendering\n- `react-router-dom` - Routing\n\n### State Management\n- `mobx` - State management\n- `mobx-react-lite` - React bindings for MobX\n\n### Styling\n- `tailwindcss` - Utility-first CSS\n- `@tailwindcss/vite` - Vite plugin for Tailwind\n- `clsx` - Conditional classes\n- `tailwind-merge` - Merge Tailwind classes\n\n### i18n\n- `i18next` - Internationalization\n- `react-i18next` - React bindings\n\n### UI\n- `lucide-react` - Icons\n- shadcn/ui components\n\n## Usage Examples\n\n### Adding a new feature module\n\n```bash\n# 1. Create the module\nnpx create-vite-shadcn add-module\n# Enter: users\n\n# 2. The module is created with:\n#    - /src/modules/users/components/UsersPage.tsx\n#    - /src/modules/users/stores/UsersStore.ts\n#    - /src/modules/users/hooks/useUsers.ts\n#    - /src/modules/users/services/usersService.ts\n#    - /src/modules/users/types/index.ts\n\n# 3. Route is auto-added at /users\n```\n\n### Using MobX stores\n\n```typescript\n// In any component\nimport { useStore } from \"@/stores\";\n\nfunction MyComponent() {\n  const store = useStore();\n  \n  // Access module stores\n  // store.users.data\n  // store.users.loading\n  \n  return <div>...</div>;\n}\n```\n\n### Using module hooks\n\n```typescript\n// In a page component\nimport { useUsers } from \"../hooks/useUsers\";\n\nexport default function UsersPage() {\n  const { data, loading, error, refetch } = useUsers();\n  \n  if (loading) return <div>Loading...</div>;\n  \n  return (\n    <div>\n      {data.map(user => <div key={user.id}>{user.name}</div>)}\n      <button onClick={refetch}>Refresh</button>\n    </div>\n  );\n}\n```\n\n### Adding shadcn components\n\n```bash\nnpx shadcn@latest add button\nnpx shadcn@latest add card\nnpx shadcn@latest add dialog\nnpx shadcn@latest add input\nnpx shadcn@latest add form\n```\n\n### Using i18n\n\n```typescript\nimport { useTranslation } from \"react-i18next\";\n\nfunction MyComponent() {\n  const { t } = useTranslation();\n  \n  return <h1>{t(\"app.welcome\")}</h1>;\n}\n```\n\nSwitch language:\n\n```typescript\nimport i18n from \"./i18n\";\n\ni18n.changeLanguage(\"fr\"); // Switch to French\n```\n\n## Configuration\n\n### Path Aliases\n\nThe project is configured with `@/` as an alias for `src/`:\n\n```typescript\n// Instead of ../../components\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/utils/cn\";\n```\n\n### Tailwind CSS v4\n\nUses the latest Tailwind CSS v4 with CSS variables for theming.\n\n## Requirements\n\n- **Node.js ≥ 18**\n- **npm ≥ 7**\n\n## After Scaffolding\n\n```bash\ncd my-vite-app\nnpm run dev\n```\n\nThen open http://localhost:5173\n\n## License\n\nMIT\n","readmeFilename":"README.md"}