create-comate-pagebuilder

Scaffold a React + Vite + Tailwind CSS project with a modern, minimalist template.

Usage

Using npm

npm create comate-pagebuilder@latest my-app
cd my-app
npm install
npm run dev

Using npx

npx create-comate-pagebuilder@latest my-app
cd my-app
npm install
npm run dev

Using Yarn

yarn create comate-pagebuilder my-app
cd my-app
yarn
yarn dev

Using PNPM

pnpm create comate-pagebuilder my-app
cd my-app
pnpm install
pnpm dev

What's Included

The generated project includes:

• React 18 - Modern React with hooks
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework with custom color system
• Framer Motion - Production-ready motion library
• Lucide React - Beautiful & consistent icon set
• clsx & tailwind-merge - Utility for constructing className strings
• Path aliases - Pre-configured for clean imports

Optional Dependencies

Add these as needed:

• GSAP - Professional-grade animation library
• Lottie Web - Render After Effects animations
• Animate.css - Ready-to-use CSS animations

Project Structure

Scaffold Project Structure

create-comate-pagebuilder/
├── bin/
│   └── index.js           # CLI entry point
├── template/              # Template files to scaffold
│   ├── src/
│   │   ├── components/    # Public components
│   │   ├── pages/         # Page modules
│   │   │   └── Home/      # Home page module
│   │   │       ├── index.jsx
│   │   │       └── components/  # Page-specific components
│   │   ├── utils/
│   │   │   └── cn.js      # className utility
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   ├── postcss.config.js
│   ├── package.json
│   └── README.md          # Template documentation
├── package.json           # Package metadata
└── README.md              # This file

Generated Project Structure

When you run npm create comate-pagebuilder@latest my-app, you'll get:

my-app/
├── src/
│   ├── components/        # Public components
│   ├── pages/             # Page modules
│   │   └── Home/          # Example: Home page module
│   │       ├── index.jsx
│   │       └── components/ # Page-specific components
│   ├── utils/
│   │   └── cn.js          # className merge utility
│   ├── App.jsx            # Root component
│   ├── main.jsx           # Application entry
│   └── index.css          # Global styles + Tailwind directives
├── index.html             # HTML template
├── vite.config.js         # Vite configuration with path aliases
├── tailwind.config.js     # Tailwind with custom color system
├── postcss.config.js      # PostCSS configuration
└── package.json           # Dependencies and scripts

Available Scripts

In the generated project directory:

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Learn More

• Vite Documentation
• React Documentation
• Tailwind CSS Documentation
• Framer Motion Documentation

License

MIT