https://github.com/mohmmedraad/TanStacked
React + Tanstack Router + Shadcn + Tailwind CSS v4 And Biome with Rsbuild boilerplate.
https://github.com/mohmmedraad/TanStacked
Last synced: about 1 month ago
JSON representation
React + Tanstack Router + Shadcn + Tailwind CSS v4 And Biome with Rsbuild boilerplate.
- Host: GitHub
- URL: https://github.com/mohmmedraad/TanStacked
- Owner: mohmmedraad
- Created: 2025-03-10T21:48:52.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-03-10T22:27:39.000Z (about 1 month ago)
- Last Synced: 2025-03-10T23:25:02.392Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://tan-stacked.vercel.app
- Size: 29.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-rspack - TanStacked
README
# React + Tailwind CSS + RSBuild Boilerplate
> 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:
```sh
$ git clone https://github.com/mohmmedraad/TanStacked.git && cd TanStacked && pnpm install
```
## 🔧 Development
Copy `.env.example` to `.env` or `.env.local`:
```sh
$ cp .env.example .env
```
Start the development server:
```sh
$ pnpm dev
```
## 🏗️ Build
Generate a production-ready build:
```sh
$ pnpm build
```
## 🚀 Deployment
### Deploying to Vercel
1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).
2. Go to [Vercel](https://vercel.com/) 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!
## 🔗 Useful Links
- [React](https://react.dev/)
- [TanStack Router](https://tanstack.com/router/latest)
- [RSBuild](https://rsbuild.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [ShadCN/UI](https://ui.shadcn.com/)
- [Biome](https://biomejs.dev/)
- [Vercel](https://vercel.com/)
---
This boilerplate is your foundation for fast, modern, and scalable React applications. Happy coding! 🎉