https://github.com/panntod/vite-starter-template
🌐 Opinionated Vite starter template with Typescript, Tailwind v4, ESLint, Prettier, Husky and more.
https://github.com/panntod/vite-starter-template
starter-kit starter-template tailwindcss typescript vite vite-react vite-react-typescript
Last synced: about 1 year ago
JSON representation
🌐 Opinionated Vite starter template with Typescript, Tailwind v4, ESLint, Prettier, Husky and more.
- Host: GitHub
- URL: https://github.com/panntod/vite-starter-template
- Owner: panntod
- License: mit
- Created: 2025-02-09T22:24:13.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-14T01:51:25.000Z (about 1 year ago)
- Last Synced: 2025-04-05T08:42:34.889Z (about 1 year ago)
- Topics: starter-kit, starter-template, tailwindcss, typescript, vite, vite-react, vite-react-typescript
- Language: TypeScript
- Homepage: https://vite-starter.pandhuarya.my.id/
- Size: 420 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Vite + React + Tailwindcss + Typescript Starter Template
A blazing-fast, modern, and highly customizable starter template for building React applications with Vite, Tailwindcss, React Router, and Typescript. This project is designed to kickstart your development process with the best tools and practices, ensuring a smooth and efficient workflow.
## ✨ Features
- ⚡ `Vite`: Lightning-fast build tool and development server.
- 🎨 `Tailwindcss`: Utility-first CSS framework for rapid UI development. (v4)
- 🔄 `React Router`: Seamless client-side routing for single-page applications.
- 📝 `Typescript`: A statically typed language that helps in building robust, maintainable JavaScript applications.
- 🧩 `SWC Support`: Faster builds and hot module replacement with @vitejs/plugin-react-swc.
- 🧹 `Prettier & ESLint`: Clean, consistent, and error-free code with integrated formatting and linting.
- 🐶 `Husky`: Git hooks for pre-commit linting and formatting.
- 📦 `Optimized Imports`: Path aliases for cleaner imports (e.g., @/components/Button).
- 🌍 `i18n (react-i18next)`: Built-in internationalization support for multi-language applications.
- 🎭 `class-variance-authority (cva)`: Powerful utility for managing Tailwind component variants dynamically.
- 🔗 `Jotai`: Lightweight and flexible state management for React.
- 🖼️ `Lucide-react`: Beautifully designed icon library for modern UIs.
- 🔢 `UUID`: Unique ID generation for managing dynamic components.
## ❓ Why Use This Template?
- **Fast Development**: Get started instantly with a pre-configured setup.
- **Modern Stack**: Built with the latest tools and libraries.
- **Customizable**: Easily extend or modify to fit your project needs.
- **Best Practices**: Follows industry standards for code quality and performance.
## 🛠️ Tech Stack
- **Frontend**: React 18, React Router 7
- **Styling**: Tailwind CSS 3
- **Build** Tool: Vite 5
- **State Management**: Jotai
- **Icons**: Lucide React
- **Unique ID Generation**: UUID
- **Linting**: ESLint + Prettier
- **Routing**: React Router DOM
- **Tooling**: Husky, SWC, TypeScript
## 📥 Quick Start
To use this template, follow these steps:
### Step 1
You can click on the top right corner that says `use this template`
### Step 2
After that you will be directed to create a new repository, name the repository according to your needs
### Step 3
You have successfully created a repository on github. Now you can clone or download it
### Step 4
After cloning the repository, run the following command to set up Husky:
```bash
pnpm install && pnpm prepare
```
This will set up the necessary Git hooks to ensure that committed code is always spun and well-formatted.
## 🔧 Customization
- Start editing pages in src/pages and customize the routes
- Add your own components in the src/components directory.
- Modify tailwind.config.js to customize your design system.
- Update vite.config.js for additional Vite plugins or configurations.
## 📄 License
This project is open-source and available under the [MIT License](LICENSE). Feel free to use, modify, and distribute it as you see fit.
## 🌟 Get Started Today
Whether you're building a personal project, a startup MVP, or a large-scale application, this starter template has everything you need to hit the ground running. Star ⭐ the repo if you find it useful, and feel free to contribute or open issues for suggestions and improvements!
## Social Media
Get in touch with me: [Pandhu Arya](https://panntod.github.io/Project-Mandiri/linktree)
> Happy Hacking 🤖