create-bawo-frontend

⚡ A zero-config CLI to scaffold modern React (Vite) or Next.js projects with Tailwind CSS, state management, Prettier, and optional extras like shadcn/ui, Framer Motion, and GSAP — all in one command.

✨ Features

• 🚀 React (Vite) or Next.js starter templates
• 🟢 Vue 3 (Vite) starter templates
• 🎨 Tailwind CSS v3.4 preconfigured with optimal settings
• Tailwind CSS v4 (modern engine, faster builds, CSS-first config) [optional]
• 🗂 State Management Options: Zustand, Redux Toolkit, RTK Query, React Query, SWR, Context API + useReducer
• 💅 Prettier + Tailwind plugin for consistent code formatting
• 🧩 Optional shadcn/ui component library setup
• 🎥 Optional Framer Motion + GSAP with demo components
• 🔥 Auto-start dev server for immediate development
• 📦 Zero configuration - works out of the box
• 🎯 TypeScript support with proper configurations

Vue includes:

• Tailwind CSS (v3 / v4)
• TypeScript support
• Vue Router
• Pinia state management
• GSAP (optional)

🚀 Quick Start

You don't need to install globally. Just use npx:

npx create-bawo-frontend my-app -y
cd my-app
npm run dev

That's it! Your development server will start automatically.

✅ Tailwind v4 (Optional – Explicit Opt-in)

You can opt into Tailwind CSS v4 (modern engine, faster builds, CSS-first config) using the flag below:

React with Tailwind v4 (modern setup)

npx create-bawo-frontend my-app --tailwind v4 -y

Next.js with Tailwind v4

npx create-bawo-frontend my-app --framework next --tailwind v4 -y

📦 Installation & Usage

Basic Usage

npx create-bawo-frontend <project-name> [options]

Interactive Mode

npx create-bawo-frontend my-app

The CLI will prompt you to choose your preferred options.

Quick Mode (Skip Prompts)

npx create-bawo-frontend my-app -y

Uses sensible defaults and starts the dev server automatically.

⚙️ CLI Options

| Option | Description | Default | | ------ | ----------- | ------- | | --framework react\|next\|vue | Choose framework | react | | --ts | Use TypeScript | false | | --tailwind v3\|v4 | Choose Tailwind CSS version | v3 | | --state-mgmt zustand\|redux\|rtk-query\|react-query\|swr\|context | Choose state management | zustand | | --ui shadcn | Add shadcn/ui preset | false | | --framer | Add Framer Motion + demo | false | | --gsap | Add GSAP + demo | false | | --no-start | Prevent auto-start dev server | false | | -y, --yes | Skip prompts, use defaults + auto-start | false | | -h, --help | Show help message | - | | -v, --version | Show CLI version | - |

🎯 Usage Examples

React with TypeScript and Redux Toolkit

npx create-bawo-frontend my-app --framework react --ts --state-mgmt redux -y

Next.js with React Query and animations

npx create-bawo-frontend my-app --framework next --state-mgmt react-query --framer --gsap -y

Full-featured setup with RTK Query

npx create-bawo-frontend my-app --framework next --ts --state-mgmt rtk-query --ui shadcn --framer --gsap -y

Vue 3 with TypeScript and Tailwind v4

npx create-bawo-frontend my-app --framework vue --ts --tailwind v4 -y

🛠 What's Included

Core Dependencies

• React 18 or Next.js 14 (App Router) or Vue 3
• Vite (for React and Vue projects)
• Tailwind CSS v3.4 or v4 with JIT compilation
• State Management (your choice of library)
• Prettier with Tailwind CSS plugin

State Management Options

• Zustand (lightweight) - Simple, unopinionated state management
• Redux Toolkit - Modern Redux with less boilerplate
• RTK Query - Data fetching and caching built on Redux Toolkit
• React Query - Powerful data synchronization for React
• SWR - Data fetching with caching, revalidation, and more
• Context API + useReducer - Built-in React state management
• Pinia - Official state management for Vue 3

Pre-configured Features

• ✅ Tailwind CSS with custom configuration
• ✅ State management store with persistence and devtools (where applicable)
• ✅ Prettier formatting rules
• ✅ TypeScript configuration (when enabled)
• ✅ Demo components for animations
• ✅ Responsive design utilities

State Management Store

The included store template provides:

• State persistence with localStorage (Zustand, Redux, Pinia)
• DevTools integration (where supported)
• TypeScript support
• Example actions and selectors
• API integration examples (RTK Query, React Query, SWR)

📄 License

MIT © Joseph Bawo

🧑‍💻 Author

Joseph Bawo
Scaffolding the future of frontend development

• GitHub: @Joebakid
• npm: josephbawo
• Website: https://create-bawo-frontend.vercel.app/

🙏 Acknowledgments

• Vite for the blazing fast build tool
• Next.js for the React framework
• Tailwind CSS for the utility-first CSS
• Zustand for simple state management
• Redux Toolkit for modern Redux
• RTK Query for data fetching
• React Query for powerful data synchronization
• SWR for data fetching with caching
• shadcn/ui for beautiful components