How do I install the Sidebar (Groups) block?

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

Is the Sidebar (Groups) block free to use?

Yes. Sidebar (Groups) 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 (Groups) 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 (Groups)

App shellsMIT

View in Storybook

Sidebar shell with grouped section headings for larger nav trees.

bun add @otfdashkit/ui

Preview

Sidebar (Groups)App shells

Loading Storybook preview…

Code

@otfdashkit/ui

import { SidebarLayoutGroups } from '@otfdashkit/ui'

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

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

Props

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

Prop	Type	Default
brandName	string	'Acme Inc'
children	ReactNode
className	string
pageTitle	string	'Dashboard'

Preview

Code

Props

Related