NextJS 11 + Antd + Tailwind Starter Development Pack.

  • By Faris
  • Last update: Oct 11, 2022
  • Comments: 0

This project will be in hiatus mode for sometime.

Why? Currently I'm creating a product that gonna be launch soon and it is inspired when I'm working on this open source project. So stay tuned!

So, see you when I see you. :)


This is a nextjs-antd-tailwindcss starter pack to ease your NextJS 11 development.

For NextJS features, you can go to NextJS documentation.

For base component feature, you can go to Antd documentation.

For base css style, you can go to TailwindCSS documentation.



  • Single layout with Top Navigation Bar
  • Side navigation layout for creating Dashboard


  • Login using Google
  • Login using Facebook

Navigation Bar

  • 4 plug-n-play top navigation bar components
  • 1 plug-n-play footer component


  • 2 plug-n-play header components


  • Google Analytics

Getting Started

Before getting started, you can clone this project or run following command:

yarn create next-app --example

Afterward, install dependencies and rename the env local example:

yarn install && mv .env.local.example .env.local

And run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Component Preview

After you run the dev server, you can access http://localhost:3000/components to preview plug-n-play components included in this project. Or you can access to pages/components to view more detail in code.

Custom Theme

You can customize the theme color and others based on Antd Custom Theme

First, update the less file in style.less.

Second, run the less compile script:

yarn run less-compile


Thanks to the creator of who created an awesome open-source illustration.

If you need more illustration, you can download the svg file from and put it into svg folder.

You can use the svg file using SvgImage component.