How do I install the App Shell block?

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

Is the App Shell block free to use?

Yes. App Shell 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 App Shell 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.

App Shell

App shellsMIT

View in Storybook

Sidebar + main layout with mobile trigger, collapse, and responsive behavior.

bun add @otfdashkit/ui

Preview

App ShellApp shells

Code

@otfdashkit/ui

import { SidebarLayoutDashboard } from '@otfdashkit/ui'

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

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

Kit for this component

SaaS Dashboard Kit$99

Put a sidebar layout around an admin or app dashboard.

See the kit

Props

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

Prop	Type	Default	Description
className	string

Preview

Code

Props

Related