madebyais / nextjs-antd-tailwindcss

NextJS 11 + Antd + Tailwind Starter Development Pack.

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. :)

nextjs-antd-tailwind

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.

Features

Layout

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

Login

• Login using Google
• Login using Facebook

Navigation Bar

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

Header

• 2 plug-n-play header components

Others

• Google Analytics

Getting Started

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

yarn create next-app --example https://github.com/madebyais/nextjs-antd-tailwindcss

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

Illustration

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

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

You can use the svg file using SvgImage component.

Author

Ais