This is a React + TypeScript + Tailwind CSS boilerplate to be built with Vite. It also includes ESLint 8, Vitest, Husky and a pre-commit hook that runs prettier --write and eslint --fix.
- Vite
- React 18
- TypeScript
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
- ESLint 8
- @tanstack/react-router
- @tanstack/react-query
- @tanstack/react-table
- Tailwind CSS
- shadcn/ui
- Zod
- lucide
- Vitest
- Prettier
- Husky
Install dependencies.
yarnServe with hot reload at http://localhost:{PORT}.
yarn devyarn formatRun ESLint
yarn lintRun ESLint and fix
yarn lint:fixyarn buildyarn testThis project will use commitlint to ensure that commit messages are Conventional Commits specification compliants.
To help you build more efficient commit messages, you will use the commitizen package by running this command :
yarn czBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
npx shadcn-ui@latest add buttonTo add new colors, you need to add them to your CSS file and to your tailwind.config.js file. More info
app/globals.css
:root {
--warning: 38 92% 50%;
--warning-foreground: 48 96% 89%;
}
.dark {
--warning: 48 96% 89%;
--warning-foreground: 38 92% 50%;
}tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
},
},
},
};You can now use the warning utility class in your components.
<div className="bg-warning text-warning-foreground" />Workaround for Node Version Managers and GUIs
# ~/.config/husky/init.sh
export NVM_DIR=~/.nvm
#source $(brew --prefix nvm)/nvm.sh # This loads nvm with brew.sh
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # or this loads nvm
#exit 1 # test hook without committing