import {
BookOpenIcon,
BotIcon,
ChevronRightIcon,
FrameIcon,
GalleryVerticalEndIcon,
MapIcon,
PieChartIcon,
Settings2Icon,
SquareTerminalIcon,
} from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarTrigger,
} from "@/components/ui/sidebar";

const platform = [
{
  title: "Playground",
  icon: SquareTerminalIcon,
  isActive: true,
  items: ["History", "Starred", "Settings"],
},
{ title: "Models", icon: BotIcon, items: ["Genesis", "Explorer", "Quantum"] },
{
  title: "Documentation",
  icon: BookOpenIcon,
  items: ["Introduction", "Get Started", "Tutorials"],
},
{ title: "Settings", icon: Settings2Icon, items: ["General", "Team"] },
];

const projects = [
{ name: "Design Engineering", icon: FrameIcon, badge: "12" },
{ name: "Sales & Marketing", icon: PieChartIcon, badge: "3" },
{ name: "Travel", icon: MapIcon },
];

export function SidebarIconDemo() {
return (
  // The preview keeps the sidebar inside this frame (relative and the frame
  // classes here, absolute h-full on <Sidebar>). In an app, drop them.
  <SidebarProvider className="relative h-[36rem] min-h-0 overflow-hidden rounded-xl border">
    <Sidebar className="absolute h-full" collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="Acme Inc">
              <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <GalleryVerticalEndIcon className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">Acme Inc</span>
                <span className="truncate text-xs">Enterprise</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            {platform.map((item) => (
              <Collapsible
                key={item.title}
                asChild
                defaultOpen={item.isActive}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                      tooltip={item.title}
                      isActive={item.isActive}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                      <ChevronRightIcon className="ml-auto transition-[transform] duration-(--godui-duration-base) ease-spring-smooth group-data-[state=open]/collapsible:[transform:rotate(90deg)]" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((sub) => (
                        <SidebarMenuSubItem key={sub}>
                          <SidebarMenuSubButton href="#">
                            <span>{sub}</span>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            {projects.map((project) => (
              <SidebarMenuItem key={project.name}>
                <SidebarMenuButton tooltip={project.name}>
                  <project.icon />
                  <span>{project.name}</span>
                </SidebarMenuButton>
                {project.badge ? (
                  <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
                ) : null}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="shadcn">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-xs font-medium">
                CN
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">shadcn</span>
                <span className="truncate text-xs">m@example.com</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
    <SidebarInset>
      <header className="flex h-14 shrink-0 items-center gap-2 px-4">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mr-2 data-[orientation=vertical]:h-4"
        />
        <span className="text-sm text-muted-foreground">
          Building Your App
        </span>
        <span className="text-sm text-muted-foreground">/</span>
        <span className="text-sm">Data Fetching</span>
      </header>
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
        </div>
        <div className="flex-1 rounded-xl bg-muted/50" />
      </div>
    </SidebarInset>
  </SidebarProvider>
);
}

import {
BookOpenIcon,
BotIcon,
ChevronRightIcon,
FrameIcon,
GalleryVerticalEndIcon,
MapIcon,
PieChartIcon,
Settings2Icon,
SquareTerminalIcon,
} from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarTrigger,
} from "@/components/ui/sidebar";

const platform = [
{
  title: "Playground",
  icon: SquareTerminalIcon,
  isActive: true,
  items: ["History", "Starred", "Settings"],
},
{ title: "Models", icon: BotIcon, items: ["Genesis", "Explorer", "Quantum"] },
{
  title: "Documentation",
  icon: BookOpenIcon,
  items: ["Introduction", "Get Started", "Tutorials"],
},
{ title: "Settings", icon: Settings2Icon, items: ["General", "Team"] },
];

const projects = [
{ name: "Design Engineering", icon: FrameIcon, badge: "12" },
{ name: "Sales & Marketing", icon: PieChartIcon, badge: "3" },
{ name: "Travel", icon: MapIcon },
];

export function SidebarFloatingDemo() {
return (
  // The preview keeps the sidebar inside this frame (relative and the frame
  // classes here, absolute h-full on <Sidebar>). In an app, drop them.
  <SidebarProvider className="relative h-[36rem] min-h-0 overflow-hidden rounded-xl border">
    <Sidebar
      className="absolute h-full"
      variant="floating"
      collapsible="icon"
    >
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="Acme Inc">
              <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <GalleryVerticalEndIcon className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">Acme Inc</span>
                <span className="truncate text-xs">Enterprise</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            {platform.map((item) => (
              <Collapsible
                key={item.title}
                asChild
                defaultOpen={item.isActive}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                      tooltip={item.title}
                      isActive={item.isActive}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                      <ChevronRightIcon className="ml-auto transition-[transform] duration-(--godui-duration-base) ease-spring-smooth group-data-[state=open]/collapsible:[transform:rotate(90deg)]" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((sub) => (
                        <SidebarMenuSubItem key={sub}>
                          <SidebarMenuSubButton href="#">
                            <span>{sub}</span>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            {projects.map((project) => (
              <SidebarMenuItem key={project.name}>
                <SidebarMenuButton tooltip={project.name}>
                  <project.icon />
                  <span>{project.name}</span>
                </SidebarMenuButton>
                {project.badge ? (
                  <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
                ) : null}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="shadcn">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-xs font-medium">
                CN
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">shadcn</span>
                <span className="truncate text-xs">m@example.com</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
    <SidebarInset>
      <header className="flex h-14 shrink-0 items-center gap-2 px-4">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mr-2 data-[orientation=vertical]:h-4"
        />
        <span className="text-sm text-muted-foreground">
          Building Your App
        </span>
        <span className="text-sm text-muted-foreground">/</span>
        <span className="text-sm">Data Fetching</span>
      </header>
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
        </div>
        <div className="flex-1 rounded-xl bg-muted/50" />
      </div>
    </SidebarInset>
  </SidebarProvider>
);
}

import {
BookOpenIcon,
BotIcon,
ChevronRightIcon,
FrameIcon,
GalleryVerticalEndIcon,
MapIcon,
PieChartIcon,
Settings2Icon,
SquareTerminalIcon,
} from "lucide-react";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Separator } from "@/components/ui/separator";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarTrigger,
} from "@/components/ui/sidebar";

const platform = [
{
  title: "Playground",
  icon: SquareTerminalIcon,
  isActive: true,
  items: ["History", "Starred", "Settings"],
},
{ title: "Models", icon: BotIcon, items: ["Genesis", "Explorer", "Quantum"] },
{
  title: "Documentation",
  icon: BookOpenIcon,
  items: ["Introduction", "Get Started", "Tutorials"],
},
{ title: "Settings", icon: Settings2Icon, items: ["General", "Team"] },
];

const projects = [
{ name: "Design Engineering", icon: FrameIcon, badge: "12" },
{ name: "Sales & Marketing", icon: PieChartIcon, badge: "3" },
{ name: "Travel", icon: MapIcon },
];

export function SidebarInsetDemo() {
return (
  // The preview keeps the sidebar inside this frame (relative and the frame
  // classes here, absolute h-full on <Sidebar>). In an app, drop them.
  <SidebarProvider className="relative h-[36rem] min-h-0 overflow-hidden rounded-xl border">
    <Sidebar className="absolute h-full" variant="inset" collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="Acme Inc">
              <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <GalleryVerticalEndIcon className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">Acme Inc</span>
                <span className="truncate text-xs">Enterprise</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            {platform.map((item) => (
              <Collapsible
                key={item.title}
                asChild
                defaultOpen={item.isActive}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton
                      tooltip={item.title}
                      isActive={item.isActive}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                      <ChevronRightIcon className="ml-auto transition-[transform] duration-(--godui-duration-base) ease-spring-smooth group-data-[state=open]/collapsible:[transform:rotate(90deg)]" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((sub) => (
                        <SidebarMenuSubItem key={sub}>
                          <SidebarMenuSubButton href="#">
                            <span>{sub}</span>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            {projects.map((project) => (
              <SidebarMenuItem key={project.name}>
                <SidebarMenuButton tooltip={project.name}>
                  <project.icon />
                  <span>{project.name}</span>
                </SidebarMenuButton>
                {project.badge ? (
                  <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>
                ) : null}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="shadcn">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-xs font-medium">
                CN
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">shadcn</span>
                <span className="truncate text-xs">m@example.com</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
    <SidebarInset>
      <header className="flex h-14 shrink-0 items-center gap-2 px-4">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="mr-2 data-[orientation=vertical]:h-4"
        />
        <span className="text-sm text-muted-foreground">
          Building Your App
        </span>
        <span className="text-sm text-muted-foreground">/</span>
        <span className="text-sm">Data Fetching</span>
      </header>
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
          <div className="aspect-video rounded-xl bg-muted/50" />
        </div>
        <div className="flex-1 rounded-xl bg-muted/50" />
      </div>
    </SidebarInset>
  </SidebarProvider>
);
}

Sidebar

tsx

import {BookOpenIcon,BotIcon,ChevronRightIcon,FrameIcon,GalleryVerticalEndIcon,MapIcon,PieChartIcon,Settings2Icon,SquareTerminalIcon,} from "lucide-react";import {Collapsible,CollapsibleContent,CollapsibleTrigger,} from "@/components/ui/collapsible";import { Separator } from "@/components/ui/separator";import {Sidebar,SidebarContent,SidebarFooter,SidebarGroup,SidebarGroupLabel,SidebarHeader,SidebarInset,SidebarMenu,SidebarMenuBadge,SidebarMenuButton,SidebarMenuItem,SidebarMenuSub,SidebarMenuSubButton,SidebarMenuSubItem,SidebarProvider,SidebarRail,SidebarTrigger,} from "@/components/ui/sidebar";const platform = [{  title: "Playground",  icon: SquareTerminalIcon,  isActive: true,  items: ["History", "Starred", "Settings"],},{ title: "Models", icon: BotIcon, items: ["Genesis", "Explorer", "Quantum"] },{  title: "Documentation",  icon: BookOpenIcon,  items: ["Introduction", "Get Started", "Tutorials"],},{ title: "Settings", icon: Settings2Icon, items: ["General", "Team"] },];const projects = [{ name: "Design Engineering", icon: FrameIcon, badge: "12" },{ name: "Sales & Marketing", icon: PieChartIcon, badge: "3" },{ name: "Travel", icon: MapIcon },];export function SidebarDemo() {return (  // The preview keeps the sidebar inside this frame (relative and the frame  // classes here, absolute h-full on <Sidebar>). In an app, drop them.  <SidebarProvider className="relative h-[36rem] min-h-0 overflow-hidden rounded-xl border">    <Sidebar className="absolute h-full">      <SidebarHeader>        <SidebarMenu>          <SidebarMenuItem>            <SidebarMenuButton size="lg" tooltip="Acme Inc">              <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">                <GalleryVerticalEndIcon className="size-4" />              </div>              <div className="grid flex-1 text-left text-sm leading-tight">                <span className="truncate font-medium">Acme Inc</span>                <span className="truncate text-xs">Enterprise</span>              </div>            </SidebarMenuButton>          </SidebarMenuItem>        </SidebarMenu>      </SidebarHeader>      <SidebarContent>        <SidebarGroup>          <SidebarGroupLabel>Platform</SidebarGroupLabel>          <SidebarMenu>            {platform.map((item) => (              <Collapsible                key={item.title}                asChild                defaultOpen={item.isActive}                className="group/collapsible"              >                <SidebarMenuItem>                  <CollapsibleTrigger asChild>                    <SidebarMenuButton                      tooltip={item.title}                      isActive={item.isActive}                    >                      <item.icon />                      <span>{item.title}</span>                      <ChevronRightIcon className="ml-auto transition-[transform] duration-(--godui-duration-base) ease-spring-smooth group-data-[state=open]/collapsible:[transform:rotate(90deg)]" />                    </SidebarMenuButton>                  </CollapsibleTrigger>                  <CollapsibleContent>                    <SidebarMenuSub>                      {item.items.map((sub) => (                        <SidebarMenuSubItem key={sub}>                          <SidebarMenuSubButton href="#">                            <span>{sub}</span>                          </SidebarMenuSubButton>                        </SidebarMenuSubItem>                      ))}                    </SidebarMenuSub>                  </CollapsibleContent>                </SidebarMenuItem>              </Collapsible>            ))}          </SidebarMenu>        </SidebarGroup>        <SidebarGroup>          <SidebarGroupLabel>Projects</SidebarGroupLabel>          <SidebarMenu>            {projects.map((project) => (              <SidebarMenuItem key={project.name}>                <SidebarMenuButton tooltip={project.name}>                  <project.icon />                  <span>{project.name}</span>                </SidebarMenuButton>                {project.badge ? (                  <SidebarMenuBadge>{project.badge}</SidebarMenuBadge>                ) : null}              </SidebarMenuItem>            ))}          </SidebarMenu>        </SidebarGroup>      </SidebarContent>      <SidebarFooter>        <SidebarMenu>          <SidebarMenuItem>            <SidebarMenuButton size="lg" tooltip="shadcn">              <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-xs font-medium">                CN              </div>              <div className="grid flex-1 text-left text-sm leading-tight">                <span className="truncate font-medium">shadcn</span>                <span className="truncate text-xs">m@example.com</span>              </div>            </SidebarMenuButton>          </SidebarMenuItem>        </SidebarMenu>      </SidebarFooter>      <SidebarRail />    </Sidebar>    <SidebarInset>      <header className="flex h-14 shrink-0 items-center gap-2 px-4">        <SidebarTrigger className="-ml-1" />        <Separator          orientation="vertical"          className="mr-2 data-[orientation=vertical]:h-4"        />        <span className="text-sm text-muted-foreground">          Building Your App        </span>        <span className="text-sm text-muted-foreground">/</span>        <span className="text-sm">Data Fetching</span>      </header>      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">        <div className="grid auto-rows-min gap-4 md:grid-cols-3">          <div className="aspect-video rounded-xl bg-muted/50" />          <div className="aspect-video rounded-xl bg-muted/50" />          <div className="aspect-video rounded-xl bg-muted/50" />        </div>        <div className="flex-1 rounded-xl bg-muted/50" />      </div>    </SidebarInset>  </SidebarProvider>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/sidebar.json"

Usage

tsx

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

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  );
}

Renders a native <div> wrapper and accepts all of its props. Holds the open state, persists it in the sidebar_state cookie and toggles it on Ctrl/⌘+B. Set --sidebar-width and --sidebar-width-icon in style to change the widths (16rem and 3rem).

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Open state on first render, when uncontrolled.
`open`	`boolean`	none	Controlled open state (desktop).
`onOpenChange`	`(open: boolean) => void`	none	Called when the desktop open state changes.

Renders a native <div> and accepts all of its props. Below 768px it renders a GodUI Sheet instead.

Prop	Type	Default	Description
`side`	`"left" \| "right"`	`"left"`	Edge of the page the sidebar sits on.
`variant`	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`	`floating` draws a rounded card with a shadow; `inset` pairs with `SidebarInset`.
`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	`offcanvas` slides the panel out, `icon` collapses it to an icon rail, `none` never collapses.

SidebarTrigger

Renders a GodUI Button (ghost, icon) and accepts all its props. Toggles the sidebar after calling your onClick.

SidebarRail

Renders a native <button> and accepts all of its props. A thin hit area on the panel's edge that toggles the sidebar.

SidebarInset

Renders a native <main> and accepts all of its props. The page content beside an inset sidebar.

SidebarHeader, SidebarFooter, SidebarContent

Render a native <div> and accept all of their props. The header and footer stay put; the content between them scrolls.

SidebarGroup, SidebarGroupContent

Render a native <div> and accept all of their props. A group is a section of the panel.

SidebarGroupLabel

Renders a native <div> and accepts all of its props. Hidden in icon mode.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.

SidebarGroupAction

Renders a native <button> and accepts all of its props. Sits in the group's top-right corner. Hidden in icon mode.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.

SidebarMenu, SidebarMenuItem

Render a native <ul> and <li> and accept all of their props.

SidebarMenuButton

Renders a native <button> and accepts all of its props.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead (e.g. a link), merging props via Radix Slot.
`isActive`	`boolean`	`false`	Marks the current page; sets `data-active`.
`variant`	`"default" \| "outline"`	`"default"`	Visual style.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Height: `h-8`, `h-7` or `h-12`.
`tooltip`	`string \| ComponentProps<typeof TooltipContent>`	none	Tooltip shown on hover while collapsed to icons on desktop.

SidebarMenuAction

Renders a native <button> and accepts all of its props. Sits at the right of a menu item. Hidden in icon mode.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.
`showOnHover`	`boolean`	`false`	Show the action only while its item is hovered, focused or open (always visible on mobile).

SidebarMenuBadge

Renders a native <div> and accepts all of its props. A count or label at the right of a menu item. Hidden in icon mode.

SidebarMenuSkeleton

Renders a native <div> and accepts all of its props. A loading placeholder for a menu item, with a random text width between 50% and 90%.

Prop	Type	Default	Description
`showIcon`	`boolean`	`false`	Adds an icon placeholder before the text.

SidebarMenuSub, SidebarMenuSubItem

Render a native <ul> and <li> and accept all of their props. A nested menu under a menu item. Hidden in icon mode.

SidebarMenuSubButton

Renders a native <a> and accepts all of its props.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.
`size`	`"sm" \| "md"`	`"md"`	Text size: `text-xs` or `text-sm`.
`isActive`	`boolean`	`false`	Marks the current page; sets `data-active`.

SidebarInput, SidebarSeparator

Render a GodUI Input and Separator, styled for the panel; accept all their props.

useSidebar

Reads the sidebar state. Must be called inside SidebarProvider.

Field	Type	Description
`state`	`"expanded" \| "collapsed"`	Desktop state, also set as `data-state` on the sidebar.
`open`	`boolean`	Whether the desktop sidebar is open.
`setOpen`	`(open: boolean) => void`	Opens or closes the desktop sidebar.
`openMobile`	`boolean`	Whether the mobile sheet is open.
`setOpenMobile`	`(open: boolean) => void`	Opens or closes the mobile sheet.
`isMobile`	`boolean`	`true` below 768px.
`toggleSidebar`	`() => void`	Toggles the mobile sheet or the desktop sidebar, whichever is active.

Props match shadcn/ui Sidebar.