AmirReza Jamali 4cc7684b1f refactor(layouts): extract MainLayout component and improve sidebar mobile UX
- Extract MainLayout component from ConditionalLayout to reduce nesting and improve code organization
- Add useIsMobile hook to MainLayout for responsive behavior and prevent layout reflow on mobile
- Implement collapsed sidebar state for mobile devices showing only icons (70px width)
- Add MenuExpandIcon component to sidebar icons for collapsed state UI
- Update sidebar to display favicon instead of full logo when collapsed on mobile
- Remove menu toggle button and logo from header, consolidate in sidebar for better UX
- Improve sidebar styling with conditional padding and alignment for collapsed state
- Update sidebar navigation items to hide text labels when collapsed, showing only icons
- Refactor header component to remove mobile-specific logic now handled in MainLayout
- Enhance mobile navigation by maintaining sidebar space reservation to avoid layout reflow
2025-12-08 17:07:54 +03:30
2025-11-29 11:10:13 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30
2025-09-09 11:20:26 +03:30

NextAdmin - Next.js Admin Dashboard Template and Components

NextAdmin is a Free, open-source Next.js admin dashboard toolkit featuring 200+ UI components and templates that come with pre-built elements, components, pages, high-quality design, integrations, and much more to help you create powerful admin dashboards with ease.

nextjs admin template

NextAdmin provides you with a diverse set of dashboard UI components, elements, examples and pages necessary for creating top-notch admin panels or dashboards with powerful features and integrations. Whether you are working on a complex web application or a basic website, NextAdmin has got you covered.

Visit Website

🚀 Live Demo

📖 Docs

By leveraging the latest features of Next.js 14 and key functionalities like server-side rendering (SSR), static site generation (SSG), and seamless API route integration, NextAdmin ensures optimal performance. With the added benefits of React 18 advancements and TypeScript reliability, NextAdmin is the ultimate choice to kickstart your Next.js project efficiently.

Installation

  1. Download/fork/clone the repo and Once you're in the correct directory, it's time to install all the necessary dependencies. You can do this by typing the following command:
npm install

If you're using Yarn as your package manager, the command will be:

yarn install
  1. Okay, you're almost there. Now all you need to do is start the development server. If you're using npm, the command is:
npm run dev

And if you're using Yarn, it's:

yarn dev

And voila! You're now ready to start developing. Happy coding!

Highlighted Features

200+ Next.js Dashboard Ul Components and Templates - includes a variety of prebuilt Ul elements, components, pages, and examples crafted with a high-quality design. Additionally, features seamless essential integrations and extensive functionalities.

  • A library of over 200 professional dashboard UI components and elements.
  • Five distinctive dashboard variations, catering to diverse use-cases.
  • A comprehensive set of essential dashboard and admin pages.
  • More than 45 Next.js files, ready for use.
  • Styling facilitated by Tailwind CSS files.
  • A design that resonates premium quality and high aesthetics.
  • A handy UI kit with assets.
  • Over ten web apps complete with examples.
  • Support for both dark mode and light mode.
  • Essential integrations including - Authentication (NextAuth), Database (Postgres with Prisma), and Search (Algolia).
  • Detailed and user-friendly documentation.
  • Customizable plugins and add-ons.
  • TypeScript compatibility.
  • Plus, much more!

All these features and more make NextAdmin a robust, well-rounded solution for all your dashboard development needs.

Update Logs

Version 1.2.1 - [Mar 20, 2025]

  • Fix Peer dependency issues and NextConfig warning.
  • Updated apexcharts and react-apexhcarts to the latest version.

Version 1.2.0 - Major Upgrade and UI Improvements - [Jan 27, 2025]

  • Upgraded to Next.js v15 and updated dependencies
  • API integration with loading skeleton for tables and charts.
  • Improved code structure for better readability.
  • Rebuilt components like dropdown, sidebar, and all ui-elements using accessibility practices.
  • Using search-params to store dropdown selection and refetch data.
  • Semantic markups, better separation of concerns and more.

Version 1.1.0

  • Updated Dependencies
  • Removed Unused Integrations
  • Optimized App

Version 1.0

  • Initial Release - [May 13, 2024]
S
Description
No description provided
Readme 9.1 MiB
Languages
TypeScript 97.6%
CSS 1.7%
Shell 0.3%
JavaScript 0.3%