shadimage

Sidebar 01 - Classic Admin Sidebar

Navigate dashboards with a clean vertical sidebar featuring grouped links for dashboards, pages, apps, and settings. Includes branding, a collapsible layout, and a promotional upgrade card for building scalable admin interfaces.

src/components/shadcn-dashboard/blocks/sidebar/sidebar-01/page.tsx

import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/shadcn-dashboard/blocks/sidebar/sidebar-01/app-sidebar";

const Page = () => {
  return (
    <SidebarProvider>
      <AppSidebar />
      {/* ---------------- Main ---------------- */}
      <div className="flex flex-1 flex-col">
        <header className="sticky top-0 z-50 flex h-14 items-center border-b px-4">
          <SidebarTrigger className="cursor-pointer"/>
        </header>
        <main className="flex-1 p-4" />
      </div>
    </SidebarProvider>
  );
};

export default Page;
Where it goes
logo-cloudsidebardashboard-shellsettings-formkanban
Visual style
minimal
Interaction
accordion
Use cases
dashboard

DependenciesBundle weight · light

icons
lucide-react