Sidebar

Navigation shell with squared rails, uppercase labels, and an off-canvas mobile experience—all tuned to the Omni glass treatment.

Interactive demo

overview
Control plane
Content area demonstrates how the inset pairs with the sidebar.
This panel inherits the frosted backdrop while the sidebar keeps its glass rail and uppercase markers.

Installation

pnpm dlx shadcn@latest add @omni/sidebar

Usage

import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuButton } from "@/components/ui/sidebar"

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuButton>Overview</SidebarMenuButton>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>Content area</SidebarInset>
</SidebarProvider>