How do I install the Sidebar (User) block?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { SidebarLayoutUser }. Copy-paste distribution is also supported.

Is the Sidebar (User) block free to use?

Yes. Sidebar (User) ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Sidebar (User) page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Sidebar (User)

App shellsMIT

View in Storybook

Sidebar shell with user profile footer — avatar, name, and account actions.

bun add @otfdashkit/ui

Preview

Sidebar (User)App shells

Loading Storybook preview…

Code

@otfdashkit/ui

import { SidebarLayoutUser } from '@otfdashkit/ui'

export function Example() {
  return (
    <SidebarLayoutUser />
  )
}

Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.

Props

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

Prop	Type	Default
children	ReactNode
className	string
pageTitle	string	'Dashboard'
userEmail	string	'jane@acme.com'
userName	string	'Jane Doe'
userRole	string	'Admin'

Preview

Code

Props

Related