Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cristicretu/ts-next-tailwind-template
Ultimate Front-end Template made using NextJs, TailwindCSS, and Typescript
https://github.com/cristicretu/ts-next-tailwind-template
nextjs nextjs-template tailwind-template tailwindcss template template-project typescript typescript-template
Last synced: about 2 months ago
JSON representation
Ultimate Front-end Template made using NextJs, TailwindCSS, and Typescript
- Host: GitHub
- URL: https://github.com/cristicretu/ts-next-tailwind-template
- Owner: cristicretu
- License: mit
- Created: 2021-10-05T14:03:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T17:08:26.000Z (8 months ago)
- Last Synced: 2024-08-10T10:03:56.927Z (6 months ago)
- Topics: nextjs, nextjs-template, tailwind-template, tailwindcss, template, template-project, typescript, typescript-template
- Language: TypeScript
- Homepage: https://template.cretu.dev
- Size: 6.47 MB
- Stars: 102
- Watchers: 1
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ultimate Front-end Template
> Most elements are taken from [my website](https://cretu.dev).
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcristicretu%2Fts-next-tailwind-template)
[Use as a CodeSandbox template](https://codesandbox.io/s/ts-next-tailwind-template-vbjvcr)
## Ingredients ✨:
- NextJS 13 🚀
- TailwindCSS 🦄
- Typescript 🦺
- Dark Mode Support 🌓
- ESLint + Prettier Config 📂
- Husky 🐶
- Self-Hosted Inter Font ␊
## Getting started
1. With 'use as template' repository
2. Clone the project
```bash
# http
git clone https://github.com/cristicretu/ts-next-tailwind-template.git
```
```bash
# ssh
git clone [email protected]:cristicretu/ts-next-tailwind-template.git
```
3. With `create-next-app`
```bash
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:
```bash
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
```bash
cd project-name
npm install
# yarn install
# pnpm install
```
## Included
### Custom classNames function
> Under `/lib/classNames`
### Packages
1. Next-themes: An abstraction for themes in your Next.js app
2. react-use: react-hooks
3. Framer Motion: animation library
### Custom globals.css
1. custom underline
2. vercel navbar
3. removes firefox, edge and ie. bugs with overflows
### Absolute Imports
```tsx
import TextField from '../../../ui/TextField.tsx'
```
changes to
```tsx
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/`
