Dashboard Layout

Responsive admin dashboard shell with collapsible sidebar navigation, breadcrumbs, top bar with search, and theme switching. Ready to drop your content into.

Next.jsDashboardsBuilt with v0

3.2k

Stars

18.7k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module dashboard-layout

Code Preview

index.tsx

export function DashboardLayout({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="flex h-screen">
      <Sidebar open={sidebarOpen} onToggle={() => setSidebarOpen(!sidebarOpen)} />
      <div className="flex flex-1 flex-col overflow-hidden">
        <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
        <main className="flex-1 overflow-y-auto p-6">
          <Breadcrumbs />
          {children}
        </main>
      </div>
    </div>
  );
}

function Sidebar({ open, onToggle }) {
  return (
    <aside className={`${open ? "w-64" : "w-16"} border-r bg-gray-50 transition-all`}>
      {navItems.map((item) => (
        <NavLink key={item.href} href={item.href} icon={item.icon} label={open ? item.label : ""} />
      ))}
    </aside>
  );
}