DEV Community

syed kamruzzaman
syed kamruzzaman

Posted on • Updated on

NextJs Simple admin Panel /Dashboard with TailwindCss

Today I am talking about the template for the admin panel. When new learning developer working on admin panel for backend work for his learning. That times he does not find out simple admin panel. There is a lot of admin panel on the internet. You can easily find out. But This admin panel has a lot of components. This component getting a little bit difficult to handle admin panel for a new developer who is just learning.

That's why I am showing a simple admin panel for a new developer. This admin panel you can easily handle. It has a few components. You can add more components when you need. Below is a detailed discussion of this admin panel

clone/download this admin panel on this github Link. and run on your computer.

Now go to pages folder and open index.js file. you can see below image

Image description
This admin panel first run dashboard page. First we talk about layout component. After the end we talk about pages.

Image description

Image description

go to layout component [components/layout/Layout.js]. this file we can see Three component Sidebar, Header, and Footer Component. First we see Sidebar component. crt with click Sidebar component or go to [components/layout/Sidebar.js]

Image description
this Sidebar.js file inside three components. Logo, Nav and SettingButton. If you go Logo component, then you can change logo what you want.

Image description

go to Nav component [components/layout/sidebar/Nav.js]. this file, we can see little bit long code. Don't worry, it is simple code. I will discuss step by step.

part one

Image description

part two

Image description

Nav.js file, you will see Nav Item component. This NavItem is separate single menu. you just pass some props. Like as page link, menu title and menu logo.
if you need menu under child menu then props subMenu will be true and pass array into subMenuArray props

Image description

Image description

Image description
That's all sidebar components. Now we will see Header and Footer Component.

When you go Header component [components/layout/Header.js]. This file you will see Four components. Search Box, UserMenu, Notifications and LogOutButton component. You can change easily what ever you want.

Image description

Now, we talk about pages. Go pages folder and open index.js. this file has Dashboard component

Image description

click Dashboard component or go to components/dashboard/Dashboard.js file and open. you will see main div. this main div under you can change what ever you want. same as category and other pages.

Image description

Image description

Mobile responsive view

Image description

Image description

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]
https://github.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss

Top comments (0)