React Boilerplate

A modern boilerplate using React 18, TypeScript, Vite, Tailwind CSS, Shadcn, Redux Toolkit, and more! Designed for rapid development with a clean and minimalistic setup, focusing on productivity, performance, and scalability.

Overview

This boilerplate is a powerful setup for building modern React applications using TypeScript and Vite for fast builds and HMR. It includes styling with Tailwind CSS and Shadcn UI, and state management with Redux Toolkit and RTK Query. Additionally, it comes with support for animations via Framer Motion, reusable components using Radix UI, and icons from Lucide React.

Why This Boilerplate?

• Rapid Development: Vite offers lightning-fast hot module replacement (HMR) and build times.
• Type-Safe: Full TypeScript support for better tooling and code safety.
• Utility-First Styling: Tailwind CSS makes styling easy, consistent, and responsive.
• UI Flexibility: Shadcn and Radix UI provide a headless UI system with accessible components.
• State Management: Redux Toolkit and RTK Query simplify state management and data fetching.
• Husky & ESLint: Enforce code standards and maintain code quality using pre-commit hooks.
• Internationalization: i18n support to make your application globally ready.
• Beautiful Animations: Framer Motion allows easy and declarative animations.

Stack

• Frontend Framework: React 18
• Build Tool: Vite
• Styling: Tailwind CSS + Shadcn UI
• Icons: Lucide React + Radix UI
• Animations: Framer Motion
• State Management: Redux Toolkit + RTK Query
• Internationalization: i18n
• Linting & Formatting: ESLint + Prettier + Husky

Prerequisites

Ensure you have the following installed:

• Node.js v16+
• Yarn v1.22+

Getting started

# Install dependencies
yarn install

# To run dev
yarn dev

# To Build for production
yarn build

# To generate component
yarn generate

# To format entire code
yarn format