10 Free Next.js Templates and Hidden Gems 2023
Tags: react, nextjs, javascript, opensource
Published: 2023-03-28 22:05:57

***Bookmark it ;)***

I often find myself spending a lot of time searching for free Next.js resources whenever I start a new project and they seem to be very difficult to find at times!

I ended up spending a good few days picking out the best free templates (and UI kits) from across the Google and Github and adding them all to this list. 

The criteria for my list was that the resource has to be high quality, use latest versions of packages, and open source/MIT license or free. 

This is an unorganized list in no particular order. I just wanted to have this for myself next time I start a new project and wanted to share it with all of you so you can bookmark this and save some time!

Let's go!

---

#### 1. **Beautifully designed components built with Radix UI and Tailwind CSS.**

![components built with Radix UI and Tailwind CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odrw4jurif4zg3dslx7h.png)


[Live Demo](https://ui.shadcn.com/) | [Github](https://github.com/shadcn/ui)

**Features:**
- Radix UI Primitives
- Tailwind CSS
- Fonts with @next/font
- Icons from Lucide
- Dark mode with next-themes

---

#### 2. **Ultimate Front-end Template**


![Ultimate Front-end Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikhie8cglz6wbu3zvcpx.png)


[Live Demo](https://template.cretu.dev/) | [Github](https://github.com/cristicretu/ts-next-tailwind-template)

**Features:**
- Modern Stack (Next.js + TailwindCSS)
- TypeScript support
- Minimal Design
- Dark Mode

---

#### 3. **Personal Site with Next.js 13, TailwindCSS, Framer Motion, Upstash**

![Personal Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smk7xffer6gr4jzrjvqf.png)

[Live Demo](https://chronark.com/) | [Github](https://github.com/chronark/chronark.com)

**Features:**
- Modern Stack (Next.js 13 + app-router)
- TailwindCSS
- Framer Motion
- Tracking page views by Upstash serverless redis

---

#### 4. **A React Portfolio Template using Next.js and Tailwind CSS**

![React Portfolio Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l35xwfbo6sf94y9mv39.png)



[Live Demo](https://react-portfolio-template.netlify.app/) | [Github](https://github.com/LionStrate/react-portfolio-template?ref=reactjsexample.com)

**Features:**
- Modern Stack (Next.js + TailwindCSS)
- Minimal Design
- Dark Mode


---

#### 5. **DaisyUI - Use Tailwind CSS but write fewer classnames**

![DaisyUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jop3jtpbc7vw7cr2x3o.png)

[Live Demo](https://daisyui.com/) | [Github](https://github.com/saadeghi/daisyui)

**Features:**
- A plugin for Tailwind CSS
- Faster development
- Cleaner HTML
- Customizable and themeable

---

#### 6. **The T3 Stack - Full-stack, typesafe Next.js starter**

![The T3 Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z57qrrdk2m868cfb44t.png)


[Live Demo](https://create.t3.gg/) | [Github](https://github.com/t3-oss/create-t3-app)

**Features:**
- Full Stack (Next.js, Prisma, Tailwind CSS)
- TypeScript support
- Authentication using NextAuth.js

---

#### 7. **Tremor - React library to build dashboards fast**

![Tremor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4p8e51230mfpqoqmslg.png)

[Live Demo](https://www.tremor.so/) | [Github](https://github.com/tremorlabs/tremor)

**Features:**
- Built on top of Tailwind CSS
- Full Next.js support
- TypeScript support

---

#### 8. **Precedent - collection of components, hooks, and utilities for your Next.js project**

![Precedent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93btx1zjz4p8nzrxiqey.png)

[Live Demo](https://precedent.dev/) | [Github](https://github.com/steven-tey/precedent)

**Features:**
- Full Stack (Next.js 13, Prisma)
- Tailwind CSS
- Radix UI
- Framer Motion
- TypeScript support

---

#### 9. **Platforms - template for site builders and low-code tools.**

![Platforms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xuwdu04n81pxw2qn4v3.png)


[Live Demo](https://demo.vercel.pub/) | [Github](https://github.com/vercel/platforms)

**Features:**
- Full Stack (Next.js 13, Prisma)
- Tailwind CSS
- PlanetScale database
- Authentication using NextAuth.js
- TypeScript support

---

#### 10. **Full Stack Personal Website by Brian Lovin**

![Personal Website by Brian Lovin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntfocylr3e8ue0we5ew4.png)

[Live Demo](https://brianlovin.com/) | [Github](https://github.com/brianlovin/briOS)

**Features:**
- Full Stack (Next.js 13, Prisma)
- Tailwind CSS
- TypeScript support



--- 

That's it! There are dozens of other templates I could have included but I wanted to keep this list short and sweet so that it can be a quick reference for your future projects. 

Article is presented by [OpenWorldAI.com](https://openworldai.com)