Dashboard

Welcome back! Here’s an overview of your projects.

Total Revenue

$45,231.89

20.1%

from last month

Active Users

2,300

15.3%

from last month

Conversion Rate

4.24%

2.1%

from last month

No reports generated yet

Get started by creating a new report. All your generated documents will appear here.

A basic layout that combines a left sidebar and a top header, most commonly used in modern SaaS applications and Admin Dashboards.

Use Cases & Features

Management screen/SaaS product: Ideal for applications with many navigation items.
Responsive Compatibility: The sidebar that is always displayed on the desktop is designed to be hidden on mobile and tablet screens (in actual operation, it is displayed in a drawer with a hamburger menu, etc.).
Flexbox layout: A structure calculated to fit the full screen height by combining utilities such as flex-1 and min-w-0. Only the main content area scrolls, the header and sidebar are fixed.

Key points of design and UX (Design & UX)

Scroll area separation: The navigation on the left (nav within aside) and the scrolling of the main content (main) on the right are independent, so even long menus do not interfere with the main screen.
Custom scrollbar: We use ::-webkit-scrollbar to change the default thick scrollbar to a thinner, sleeker design that reduces UI noise.
Highly visible hierarchical structure: By combining background colors (bg-slate-50 and bg-white), borders (border-slate-200), and light shadows (shadow-sm), the boundaries of each section are expressed naturally.

How to customize (Customization Guide)

Sidebar width: You can adjust the width by changing w-64 (16rem = 256px) specified in aside to w-72 or w-56.
Header height: You can control the overall height by changing header and the logo area at the top of the sidebar from h-16 (4rem = 64px) to h-14, etc.
Change theme color: Please replace indigo-600 etc. used in each icon and active menu with your brand color (e.g. blue-600 or violet-500).

implementation code (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- sidebar -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- Main container -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Header -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- Menu toggle for mobile -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- Notification icons, etc. -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Place page-specific content here -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

Browser Support

Works correctly with the latest versions of modern browsers (Chrome, Safari, Firefox, Edge).
Old browsers (IE, etc.) are not supported as Flexbox (flex, flex-1, flex-col) is heavily used.