create-tanstack-boilerplate

v1.0.22

Published

8 days ago

The ultimate CLI to scaffold production-ready TanStack Start applications. Features interactive setup for Vite, React 19, TailwindCSS, i18n, Form Management, Validation, and more. Get started with a scalable full-stack React framework in seconds.

🚀 Create TanStack Boilerplate

A fast, production-ready CLI to scaffold TanStack Start applications (React + Vite + TypeScript + Tailwind). Use this tool to generate opinionated, scalable starters with optional i18n, Form Management, Validation, UI, Cloudflare Deployment, and testing presets — perfect for teams and projects that need a solid default stack.

Quick Start Guide - Get started in 2 minutes
Examples & Patterns - Common use cases and code examples
Contributing - Contribution guidelines
Testing Guide - How to test the CLI
Changelog - Version history

🚀 Quick Start

NPM

npx create-tanstack-boilerplate

PNPM

pnpm create tanstack-boilerplate

Yarn

yarn create tanstack-boilerplate

🎯 What You Get

The CLI will guide you through:

Project name - Name of your new project
Package manager - Choose between pnpm, npm, or yarn
Features - Select which features you want:
- 🌍 Internationalization (i18n)
- 🎨 UI Components (Radix UI + Tailwind)
- ⚡ State Management (Jotai)
- 📋 Form Management (TanStack Form)
- 🛡️ Validation (Zod/ArkType)
- 🎭 Animations (Framer Motion)
- ✅ Testing (Vitest)
- 🎯 Code Quality (Biome + Husky)
- ☁️ Cloudflare Deployment (Workers)
Languages (if i18n selected) - Choose which languages to support
Base locale (if i18n selected) - Set your default language
Git initialization - Initialize a git repository

📸 Example

$ npx create-tanstack-boilerplate

🚀 Create TanStack Start Boilerplate

✔ Project name: … my-awesome-app
✔ Select a package manager: › pnpm
✔ Select features to include: › i18n, ui, quality
✔ Select languages to support: › en, vi
✔ Select base/default language: › en
✔ Initialize git repository? … yes

📦 Creating project structure...

✓ Project created successfully!

Next steps:

  cd my-awesome-app
  pnpm install
  pnpm dev

📁 Project Structure

my-app/
├── src/
│   ├── routes/              # TanStack Router routes
│   ├── components/          # React components
│   ├── lib/                 # Utility libraries
│   ├── styles/              # Global styles
│   └── ...
├── messages/                # i18n translations (if selected)
├── tests/                   # Test files (if selected)
└── ...

See EXAMPLES.md for detailed structure examples.

🛠️ Tech Stack

Core (Always Included)

⚡ TanStack Start - Full-stack React framework
⚛️ React 19 - Latest React
🔄 TanStack Router - Type-safe routing
🔍 TanStack Query - Data fetching & caching
📦 Vite - Lightning-fast build tool
🎯 TypeScript - Type safety

Optional Features

See EXAMPLES.md for detailed feature descriptions and usage examples.

🧪 Development

Local Testing

# Clone the repo
git clone <your-repo>
cd create-tanstack-boilerplate

# Install dependencies
pnpm install

# Test locally
node index.js

# Or link globally
npm link
create-tanstack-boilerplate

See TESTING.md for comprehensive testing guide.

Publishing

Quick publish (for maintainers):

npm login
npm publish

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details.

Quick Contribution Guide

Fork the repo
Create your feature branch
Make your changes
Test thoroughly
Submit a pull request

📝 License

MIT - See LICENSE file for details.

🙏 Credits

Built with ❤️ using:

📊 Stats

Package Size: ~25KB
Dependencies: Minimal (prompts, kolorist, changesets)
Node Version: >=18.0.0
License: MIT

Happy coding! 🚀

Made with ❤️ by the community