doinel1a / vite-react-ts-shadcn-ui

Boilerplate template designed to quickly bootstrap a React.js Web App, SPA, website or landing page with TypeScript, Shadcn/ui, TailwindCSS, Vite, SWC, ESLint, Husky and much more in just 30 seconds.

Vite React TypeScript & Shadcn/ui — Template

This development starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your development environment from scratch each time you start working. This repository is ideal for front-end developers who want to build modern, fast and reliable web applications with the latest cutting edge technologies such as React.js, TypeScript, Shadcn/ui, TailwindCSS, ESLint, Prettier, Husky, Vite and much more!

---

Demo   |   Bug(label: bug)   |   Feature(label: enhancement)

---

🔖 Table of contents

• 💻 Getting started
• 🔋 Features
• 🌐 Browsers support
• 👥 Contribute
• 📑 License
• 💎 Acknowledgements

---

💻 Getting started

Prerequisites:

• JavaScript runtime node.js;
• (OPTIONAL) Alternative package manager:
  • pnpm
    or
  • yarn

Start developing:

• Get the repository:

  • click "Use this template"   or   "Fork" button
    alternately
  • clone the repository through your terminal:
    

    git clone https://github.com/doinel1a/vite-react-ts-shadcn-ui YOUR-PROJECT-NAME

• Open your terminal or code editor to the path your project is located, and run:

  	npm	pnpm	yarn
  To install the dependencies	npm install	pnpm install	yarn install
  To run the development server	npm run dev	pnpm dev	yarn dev
  To build your app for production	npm run build	pnpm build	yarn build
  To preview your production optimized app	npm run preview	pnpm preview	yarn preview

Back to ⬆️

---

🔋 Features

This repository comes 🔋 packed with:

• React.js;
• TypeScript;
• Shadcn/ui;
• TailwindCSS;
• SASS & SCSS;
• ESLint;
• Prettier;
• Husky;
• Commitlint;
• Lint staged;
• Playwright;
• Vite;

Back to ⬆️

---

🌐 Browsers support

The provided configuration ensures 92.3% coverage for all browsers, in particular of the following:

Chrome	Firefox	Edge	Opera	Safari

* In order to support a wider percentage of browsers, update the ./.browserslistrc configuration file:

1. last 3 versions: browser version;
2. > 0.2%: browser usage statistics;
3. not dead: whether the browser is officially supported;

Update the configuration here and check in real-time the global browsers support.

* The more versions to support, larger JS and CSS bundles size will be.

Back to ⬆️

---

👥 Contribute

Contributions are what make the open source community such an amazing place to learn, inspire, and create.
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.
Please check the contributing guide for details on how to help out and keep in mind that all commits must follow the conventional commit format.

How to contribute:

1. Get started;
2. For a new feature:
   1. Create a new branch: git checkout -b feat/NEW-FEATURE;
   2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
   3. Commit your changes: git commit -m "feat: NEW FEATURE";
   4. Push your new branch: git push origin feat/NEW-FEATURE;
3. For a bug fix:
   1. Create a new branch: git checkout -b fix/BUG-FIX;
   2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
   3. Commit your changes: git commit -m "fix: BUG FIX";
   4. Push your new branch: git push origin fix/BUG-FIX;
4. Open a new pull request;

Back to ⬆️

---

📑 License

All logos and trademarks are the property of their respective owners.
Everything else is distributed under the MIT License .
See the LICENSE file for more informations.

Back to ⬆️

---

💎 Acknowledgements

Special thanks to:

• alrra for browser-logos;
• tandpfun for skill-icons;

Back to ⬆️