Ultimate Front-end Template
Most elements are taken from my website.
Ingredients ✨:
- NextJS 13 🚀
- TailwindCSS 🦄
- Typescript 🦺
- Dark Mode Support 🌓
- ESLint + Prettier Config 📂
- Husky 🐶
- Self-Hosted Inter Font ␊
Getting started
With 'use as template' repository
Clone the project
# http
git clone https://github.com/cristicretu/ts-next-tailwind-template.git
# ssh
git clone git@github.com:cristicretu/ts-next-tailwind-template.git
- With
create-next-app
npx create-next-app -e https://github.com/cristicretu/ts-next-tailwind-template project-name
- Tip: if you want to use the version prior to Next.js 13 with the app directory, use:
npx create-next-app -e https://github.com/cristicretu/ts-next-tailwind-template/tree/1ac5d6dd4157ea3c7cc89f14fbfbf01ab0b495fc project-name
Install the required packages and run the template
cd project-name
npm install
# yarn install
# pnpm install
Included
Custom classNames function
Under
/lib/classNames
Packages
- Next-themes: An abstraction for themes in your Next.js app
- react-use: react-hooks
- Framer Motion: animation library
Custom globals.css
- custom underline
- vercel navbar
- removes firefox, edge and ie. bugs with overflows
Absolute Imports
import TextField from '../../../ui/TextField.tsx'
changes to
import TextField from 'uis/TextField.tsx'
SEO optimization found in Container.tsx
Folder structuring & organization
Under
/ui/
&/public/
Self Hosted Inter Font
Under
/public/fonts/
404 Page
Favicons and more configs
Under
/public/static/favicons/