Package Exports

create-reactivite
create-reactivite/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-reactivite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

create-reactivite

A modern React boilerplate generator that creates production-ready applications with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui components.

🚀 Features

⚡ Vite - Lightning fast build tool and dev server
⚛️ React 19 - Latest React with modern features
📘 TypeScript - Full TypeScript support with strict configuration
🎨 Tailwind CSS v4 - Latest Tailwind with modern CSS features
🧩 shadcn/ui - Beautiful, accessible UI components
📦 Radix UI - Unstyled, accessible components
🌙 Dark Mode - Built-in theme switching with next-themes
📅 Date Picker - React Day Picker integration
🔔 Toast Notifications - Sonner for elegant notifications
🎯 ESLint - Code linting with modern configuration
📱 Responsive - Mobile-first responsive design
🎭 Icons - Lucide React icon library

📦 Installation

Using npx (Recommended)

npx create-reactivite my-app
cd my-app
pnpm dev

Using npm

npm create reactivite my-app
cd my-app
npm run dev

Install in current directory

npx create-reactivite .

🛠️ What's Included

Core Technologies

React 19.1.1 - Latest React with concurrent features
TypeScript 5.9.3 - Strict type checking
Vite 7.1.7 - Fast build tool and dev server
Tailwind CSS 4.1.14 - Utility-first CSS framework

UI Components

The template includes a comprehensive set of pre-built shadcn/ui components:

Layout: Card, Separator, Dialog
Forms: Button, Checkbox, Select, Calendar
Navigation: Accordion, Collapsible, Toggle
Feedback: Alert, Badge, Spinner, Toast (Sonner)
Data Display: Avatar, Table, Tooltip

Development Tools

ESLint - Code linting with React and TypeScript rules
TypeScript - Strict configuration for better code quality
Path Aliases - Clean imports with @/ prefix
Hot Reload - Instant updates during development

🏗️ Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── ui/              # shadcn/ui components
│   │   └── home-page-components/
│   ├── lib/
│   │   └── utils.ts         # Utility functions
│   ├── pages/
│   │   └── Homepage/
│   ├── App.tsx
│   ├── main.tsx
│   └── global.css
├── components.json          # shadcn/ui configuration
├── package.json
├── tsconfig.json
├── vite.config.ts
└── eslint.config.js

🚀 Getting Started

Create your project:

npx create-reactivite my-awesome-app
cd my-awesome-app

Install dependencies (automatically done):
```
pnpm install  # or npm install
```
Start development server:
```
pnpm dev      # or npm run dev
```
Open your browser and visit http://localhost:5173

📝 Available Scripts

pnpm dev - Start development server
pnpm build - Build for production
pnpm preview - Preview production build
pnpm lint - Run ESLint

🎨 Adding Components

This template uses shadcn/ui. To add new components:

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

🔧 Configuration

Tailwind CSS

The project uses Tailwind CSS v4 with the new Vite plugin. Configuration is handled through CSS variables and the components.json file.

TypeScript

Strict TypeScript configuration is included with path aliases:

import { Button } from "@/components/ui/button"
import { utils } from "@/lib/utils"

ESLint

Modern ESLint configuration with React and TypeScript support.

🌙 Dark Mode

Dark mode is pre-configured using next-themes. Toggle between light and dark themes seamlessly.

📱 Responsive Design

All components are built with mobile-first responsive design principles using Tailwind CSS.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this template for your projects.

🔗 Links

Happy coding! 🎉