🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Sidebar

Root provider component that manages sidebar state and context.

SidebarProvider wraps the entire layout and provides state management for sidebar open/close behavior, responsive mobile handling, keyboard shortcuts (Cmd/Ctrl+B), and cookie-based state persistence. All sidebar components must be descendants of this provider to access sidebar context.

Example

"use client"

import * as React from "react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@strongtie/design-system/sidebar"
import {
  MdCalendarToday,
  MdHome,
  MdInbox,
  MdSearch,
  MdSettings,
} from "react-icons/md"

const items = [
  {
    title: "Home",
    url: "#",
    icon: MdHome,
  },
  {
    title: "Inbox",
    url: "#",
    icon: MdInbox,
  },
  {
    title: "Calendar",
    url: "#",
    icon: MdCalendarToday,
  },
  {
    title: "Search",
    url: "#",
    icon: MdSearch,
  },
  {
    title: "Settings",
    url: "#",
    icon: MdSettings,
  },
]

export function SidebarDefault() {
  const [open, setOpen] = React.useState(true)

  return (
    <div
      className="relative isolate flex h-[400px] w-full overflow-hidden rounded-lg border"
      style={
        {
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
        } as React.CSSProperties
      }
    >
      <SidebarProvider open={open} onOpenChange={setOpen}>
        <Sidebar className="absolute">
          <SidebarHeader>
            <div className="p-4 text-lg font-semibold">Application</div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Menu</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild>
                        <a href={item.url}>
                          <item.icon />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <div className="text-muted-foreground p-4 text-sm">v1.0.0</div>
          </SidebarFooter>
        </Sidebar>
        <main className="flex-1 p-6">
          <SidebarTrigger />
          <div className="mt-4">
            <h1 className="text-2xl font-bold">Main Content</h1>
            <p className="text-muted-foreground mt-2">
              Toggle the sidebar using the button above.
            </p>
          </div>
        </main>
      </SidebarProvider>
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Sidebar } from "@strongtie/design-system/sidebar"

Components

This module exports the following components:

SidebarProvider
Sidebar
SidebarTrigger
SidebarRail
SidebarInset
SidebarInput
SidebarHeader
SidebarFooter
SidebarSeparator
SidebarContent
SidebarGroup
SidebarGroupLabel
SidebarGroupAction
SidebarGroupContent
SidebarMenu
SidebarMenuItem
SidebarMenuButton
SidebarMenuAction
SidebarMenuBadge
SidebarMenuSkeleton
SidebarMenuSub
SidebarMenuSubItem
SidebarMenuSubButton

Props

`<SidebarProvider>`

Prop	Type	Default
`defaultOpen`	`boolean`	-
`onOpenChange`	`((open: boolean) => void)`	-
`open`	`boolean`	-

`<Sidebar>`

Prop	Type	Default
`collapsible`	`none` \| `offcanvas` \| `icon`	-
`side`	`left` \| `right`	-
`variant`	`sidebar` \| `floating` \| `inset`	-

`<SidebarTrigger>`

Prop	Type	Default	Description
`size`	`"icon" \| "default" \| "sm" \| "lg" \| "icon-sm" \| "icon-lg" \| null`	-
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	-

`<SidebarMenuButton>`

Prop	Type	Default
`isActive`	`boolean`	-
`size`	`"default" \| "sm" \| "lg" \| null`	-
`tooltip`	`string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)`	-
`variant`	`"default" \| "outline" \| null`	-

`<SidebarMenuAction>`

Prop	Type	Default	Description
`showOnHover`	`boolean`	-

`<SidebarMenuSkeleton>`

Prop	Type	Default	Description
`showIcon`	`boolean`	-

`<SidebarMenuSubButton>`

Prop	Type	Default	Description
`isActive`	`boolean`	-
`size`	`sm` \| `md`	-

Examples

"use client"

import * as React from "react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@strongtie/design-system/sidebar"
import {
  MdCalendarToday,
  MdHome,
  MdInbox,
  MdSearch,
  MdSettings,
} from "react-icons/md"

const items = [
  {
    title: "Home",
    url: "#",
    icon: MdHome,
  },
  {
    title: "Inbox",
    url: "#",
    icon: MdInbox,
  },
  {
    title: "Calendar",
    url: "#",
    icon: MdCalendarToday,
  },
  {
    title: "Search",
    url: "#",
    icon: MdSearch,
  },
  {
    title: "Settings",
    url: "#",
    icon: MdSettings,
  },
]

export function SidebarDefault() {
  const [open, setOpen] = React.useState(true)

  return (
    <div
      className="relative isolate flex h-[400px] w-full overflow-hidden rounded-lg border"
      style={
        {
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
        } as React.CSSProperties
      }
    >
      <SidebarProvider open={open} onOpenChange={setOpen}>
        <Sidebar className="absolute">
          <SidebarHeader>
            <div className="p-4 text-lg font-semibold">Application</div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Menu</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild>
                        <a href={item.url}>
                          <item.icon />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <div className="text-muted-foreground p-4 text-sm">v1.0.0</div>
          </SidebarFooter>
        </Sidebar>
        <main className="flex-1 p-6">
          <SidebarTrigger />
          <div className="mt-4">
            <h1 className="text-2xl font-bold">Main Content</h1>
            <p className="text-muted-foreground mt-2">
              Toggle the sidebar using the button above.
            </p>
          </div>
        </main>
      </SidebarProvider>
    </div>
  )
}

Basic

"use client"

import * as React from "react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@strongtie/design-system/sidebar"
import { MdHome, MdNotifications, MdPerson, MdSettings } from "react-icons/md"

export function SidebarBasic() {
  const [open, setOpen] = React.useState(true)

  return (
    <div
      className="relative isolate flex h-[400px] w-full overflow-hidden rounded-lg border"
      style={
        {
          "--sidebar-width": "16rem",
          "--sidebar-width-icon": "3rem",
        } as React.CSSProperties
      }
    >
      <SidebarProvider open={open} onOpenChange={setOpen}>
        <Sidebar className="absolute">
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Application</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton asChild>
                      <a href="#">
                        <MdHome />
                        <span>Home</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton asChild>
                      <a href="#">
                        <MdNotifications />
                        <span>Notifications</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton asChild>
                      <a href="#">
                        <MdPerson />
                        <span>Profile</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton asChild>
                      <a href="#">
                        <MdSettings />
                        <span>Settings</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
      </SidebarProvider>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

sidebar
sidebar-content
sidebar-footer
sidebar-group
sidebar-group-action
sidebar-group-content
sidebar-group-label
sidebar-header
sidebar-input
sidebar-inset
sidebar-menu
sidebar-menu-action
sidebar-menu-badge
sidebar-menu-button
sidebar-menu-item
sidebar-menu-skeleton
sidebar-menu-sub
sidebar-menu-sub-button
sidebar-menu-sub-item
sidebar-provider
sidebar-rail
sidebar-separator
sidebar-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Sheet Skeleton

On This Page

Example Installation Components Props <SidebarProvider><Sidebar><SidebarTrigger><SidebarMenuButton><SidebarMenuAction><SidebarMenuSkeleton><SidebarMenuSubButton>Examples Basic Styling Classes Accessibility

Contribute