My Custom Vite ⚡️ + React ⚛ + TS 📘 Template

This is a custom Vite + React + TypeScript template that I created to use in my projects. It includes some of the most common tools and configurations that I use in my projects. Besides that, I also added some custom configurations and tools that I think are useful like Framer, EsLint, Prettier, and more.

Feel free to use it in your projects or to fork it and customize it to your needs.

Features 🚀

• Vite as the build tool (docs: vitejs.dev)
• React as the main library (docs: reactjs.org)
• TypeScript as the main language (docs: typescriptlang.org)
• Tailwind + shadcn/ui for styling (docs: tailwindcss.com and shadcn/ui)
• Framer for animations (docs: framer.com)
• EsLint for linting (docs: eslint.org)
• Prettier for code formatting (docs: prettier.io)
• Jest for testing (docs: jestjs.io)

Getting Started 🛠

To get started with this template, you can fork it or clone it to your local machine. After that, you can install the dependencies and start the development server.

npm install // or yarn install

npm run dev // or yarn dev

Scripts 📜

• dev: Starts the development server
• build: Builds the project for production
• test: Runs the tests
• lint: Lints the project
• format: Formats the project

Directory Structure 📁

This is the directory structure of the template:

.
├── public/
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── components/
│ │ └── ui/
│ │ ├── accordion.tsx
│ │ └── button.tsx
│ ├── lib/
│ │ └── utils.ts
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ ├── setupTests.ts
│ └── vite-env.d.ts
├── .gitignore
├── .prettierignore
├── .prettierrc
├── components.json
├── eslint.config.js
├── index.html
├── jest.config.ts
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

---

Made with ❤️ by Silas Henrique.