vite-react-ts-tailwind-starter - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #golang #android #machine-learning #macos #java #vue #awesome-list #ios #mcp #open-source

vite-react-ts-tailwind-starter

(★ 124)

A boilerplate for quickly creating React applications with the best developer experience.

File Explorer

Download Latest Version (.zip)

- commit-msg
- pre-commit
- extensions.json
- settings.json
- favicon.ico
- og-image.jpeg
- - use-localstorage-state.ts
- - config.ts
- - constants.ts
  - env.ts
  - utils.ts
- - globals.less
- - i18next.d.ts
  - resources.ts
- app.tsx
- main.tsx
- router.tsx
- vite-env.d.ts
.editorconfig
.eslintrc
.gitignore
.prettierrc.js
.stylelintrc.json
commitlint.config.cjs
components.json
index.html
LICENSE
lint-staged.config.js
package.json
postcss.config.js
README.md
tailwind.config.js
transmart.config.ts
tsconfig.json
tsconfig.node.json
vite.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/Quilljou/vite-react-ts-tailwind-starter

Downloads the entire project code from GitHub to your computer.

cd vite-react-ts-tailwind-starter

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn

Downloads and installs the libraries listed in package.json.

yarn dev

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Vite-React-TS-Tailwind-Starter

Choosing a technology stack is a very subjective matter, if you happen to like using `Vite`, `Tailwind`, `TS` and `shadcn ui` and more to build React SPA applications, then give it a try.

## Run

```sh
yarn
yarn dev
```

We prefer `Yarn` as package manager, If you want to use `pnpm` or `npm`, feel free to use

## Tech Stack

- [vite](https://vitejs.dev/)
- [react](https://reactjs.org/)
- [shadcn ui](https://ui.shadcn.com/)
- [react-i18next](https://github.com/i18next/react-i18next)
- [react-lucide](https://lucide.dev/)
- [transmart](https://github.com/Quilljou/transmart)
- [react-query](https://tanstack.com/query/latest/)
- [tailwindcss](https://tailwindcss.com/)
- [less](http://lesscss.org/)
- [postcss](https://postcss.org/)
- [react-router-dom](https://reactrouter.com/en/6.16.0)
- [eslint](https://eslint.org/)/[stylelint](https://stylelint.io/)
- [prettier](https://prettier.io/)
- [svgr](https://react-svgr.com/)
- [editorconfig](https://editorconfig.org/)
- [husky](https://typicode.github.io/husky/#/)/[lint-staged](https://github.com/okonet/lint-staged)
- [commitlint](https://commitlint.js.org/)

## Project Structure

```sh
src
├── app.tsx     # App entry
├── assets      # Assets for images, favicon etc
├── components  # React components
├── hooks       # React hooks
├── i18n        # i18n files
├── lib         # Utils、tools、services
├── main.tsx    # File entry
├── pages       # One .tsx per page
├── router.tsx  # Routers
├── styles      # Less files
├── types       # Typescript types
└── vite-env.d.ts
```

## Deploy

[Cloudflare Pages](https://pages.cloudflare.com/) is my first option to deploy React App，follow [this documentation](https://developers.cloudflare.com/pages/framework-guides/deploy-a-react-site/#deploying-with-cloudflare-pages) to deploy your site. Don't forget build directory should	choose `dist`

[Vercel](https://pages.cloudflare.com/) is a good option too，Go to [Vercel](https://vercel.com/new) and link to your Git Repo

Enjoy building.

## Related

- [Next Starter](https://github.com/Quilljou/next-ts-tailwind-starter)

- [React Starter](https://github.com/Quilljou/vite-react-ts-tailwind-starter)

- [Figma Starter](https://github.com/Quilljou/figma-react-tailwind-starter)