DEV Community

Cover image for 10 Free Next.js Templates and Hidden Gems 2023
iskurbanov
iskurbanov

Posted on • Updated on

10 Free Next.js Templates and Hidden Gems 2023

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

Live Demo | Github

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

Live Demo | Github

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

Live Demo | Github

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

Live Demo | Github

Features:

  • Modern Stack (Next.js + TailwindCSS)
  • Minimal Design
  • Dark Mode

5. DaisyUI - Use Tailwind CSS but write fewer classnames

DaisyUI

Live Demo | Github

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

Live Demo | Github

Features:

  • Full Stack (Next.js, Prisma, Tailwind CSS)
  • TypeScript support
  • Authentication using NextAuth.js

7. Tremor - React library to build dashboards fast

Tremor

Live Demo | Github

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

Live Demo | Github

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

Live Demo | Github

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

Live Demo | Github

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

Oldest comments (0)