Get started with React and tailwind. Get a super boost to your development 🚀
Inspired by https://github.com/shadcn/next-template
- Radix UI Primitives
- Tailwind CSS
- Icons from Lucide
- Fonts with
@next/font
This boilerplate has all the tooling configured (eslint, prettier, husky, lint-staged, typescript and testing)
Tailwind 3 is used for styling. Its using RedLotusUI as the component library, which is built with React and Tailwind 3. It's all configured out of the box.
Routing, folder structure and main page is setup
PWA is working out of the box
Update names in head.tsx
, package.json
to your project name.
Update icons in public
folder.
Ensure you have the latest LTS version of Node.js installed
yarn
yarn dev
- Copy everything from
tsconfig.json
to your project'stsconfig.json
- Remove tsconfig.node.json
- Add .eslintrc.yaml file
extends:
- eslint-config-redlotus-next/dist/main
-
Remove old eslintrc and prettierrc files
-
Copy .prettierignore and .eslintignore
-
Add
npx lint-staged
to husky pre-commit -
Add this to your package.json
"lint-staged": {
"*.{js,jsx,ts,tsx,md,graphql}": "yarn lint:fix"
}
-
Add these scripts to package.json
"lint:fix": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
"clean": "rm -rf node_modules/ && rm -rf yarn.lock && yarn",
-
Copy next line from tailwind.config.js
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
-
Also there may be other things that you need to copy from tailwind.config.js
-
Remove
prepare
andprettier
script -
Remove following packages
- These come from @redlotus/ui
- @emotion/react
- @emotion/styled
- @headlessui/react
- @react-hook/window-size
- clsx
- date-fns
- formik
- framer-motion
- react-icons
- These come from eslint-config-redlotus-react
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint
- eslint-config-prettier
- eslint-import-resolver-typescript
- eslint-plugin-import
- eslint-plugin-jest-dom
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-tailwindcss
- eslint-plugin-testing-library
- prettier
- These come from @redlotus/ui
yarn remove @emotion/react @emotion/styled @headlessui/react @react-hook/window-size clsx
yarn remove date-fns
yarn remove formik framer-motion react-icons
yarn remove @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jest-dom eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-tailwindcss eslint-plugin-testing-library prettier
yarn add @redlotus/ui
yarn add -D @redlotus/typescript-config eslint-config-redlotus-react lint-staged
run yarn clean
to make sure there are no missing packages
Make sure the project runs
Fix eslint errors by running yarn lint:fix
!!Update packages
Add from src/types/pwa.d.ts to your project
You can now start implementing @redlotus/ui
Add the following to your main.tsx
file:
import "@redlotus/ui/dist/style.css";
Move routing to routes.tsx Find example here
Remove moment and replace it with date-fns
Remove from src folder:
- useIsMobile hook
- SidebarContext
- Most of the components
yarn add three @react-three/fiber @react-three/drei
yarn add -D r3f-perf @react-three/editor @types/three
The cn
util handles conditional classes and class merging.
cn("px-2 bg-slate-100 py-2 bg-slate-200")
// Outputs `p-2 bg-slate-200`
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Copyright (c) 2022, tomimarkus991