React + Tailwind CSS + RSBuild Boilerplate

March 11, 2025 · View on GitHub

A minimal, high-performance React boilerplate featuring TanStack Router, ShadCN, Tailwind CSS v4, Biome, and RSBuild.

This boilerplate is designed to be as lightweight and unopinionated as possible, allowing you to quickly start developing and deploying React applications with modern tooling.

🚀 Features

  • ⚡ Blazing Fast – Optimized for performance with RSBuild.
  • 🔄 Fast Refresh – Instant feedback during development.
  • 🏗️ React 19 – The latest version of React.
  • 📂 Routing & Lazy Loading – Efficiently load routes on demand.
  • 🎨 Tailwind CSS v4 – Fully styled with utility-first CSS.
  • 🛠 ShadCN/UI – Beautifully designed components.
  • 🔒 TypeScript – Fully typed for safety and productivity.
  • 🗺 Typesafe Navigation – Ensuring safe route handling.
  • 🔀 Hybrid Routing – Mix file-based and code-based routing.
  • 🧹 Biome for Formatting & Linting – Ensures clean and consistent code.

📦 Installation

Clone the repository and install dependencies:

$ git clone https://github.com/mohmmedraad/TanStacked.git && cd TanStacked && pnpm install

🔧 Development

Copy .env.example to .env or .env.local:

$ cp .env.example .env

Start the development server:

$ pnpm dev

🏗️ Build

Generate a production-ready build:

$ pnpm build

🚀 Deployment

Deploying to Vercel

  1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).
  2. Go to Vercel and create a new project.
  3. Import your repository.
  4. In the Build and Output Settings, set the Output Directory to dist.
  5. Click Deploy and your project will be live!

This boilerplate is your foundation for fast, modern, and scalable React applications. Happy coding! 🎉