Skip to content
OTF Kit logoOTF Kit

Shadcn-style User Sidebar

Layout

Shadcn-style user sidebar for React. Sidebar shell with user profile footer — avatar, name, and account actions.

View in Storybook
Sidebar (User)
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Sidebar (User) from @otfdashkit/ui.

Code
// Sidebar (User) — Shadcn-style user sidebar for React. Sidebar shell with user profile footer — avatar, name, and account actions.
//
// Install:
//   bun add @otfdashkit/ui

import { Sidebar(User) } from '@otfdashkit/ui'

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

Props

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

PropTypeDefaultDescription
childrenReactNode
classNamestring
pageTitlestring'Dashboard'
userEmailstring'jane@acme.com'
userNamestring'Jane Doe'
userRolestring'Admin'

Related