Skip to content
OTF Kit logoOTF Kit

Shadcn-style Sidebar

Layout

Shadcn-style sidebar for React. Collapsible navigation sidebar with groups, icons, badges, and responsive behavior.

View in Storybook
Sidebar
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Sidebar from @otfdashkit/ui.

Code
// Sidebar — Shadcn-style sidebar for React. Collapsible navigation sidebar with groups, icons, badges, and responsive behavior.
//
// Install:
//   bun add @otfdashkit/ui

import { Sidebar } from '@otfdashkit/ui'

export function Example() {
  return (
    <Sidebar>
      {/* your content */}
    </Sidebar>
  )
}

Props

Props declared in the Sidebar source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
collapsedbooleanfalse
onCollapse() => void
widthstring'240px'

Related