How do I install the Branded Tabs Shell block?

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

Is the Branded Tabs Shell block free to use?

Yes. Branded Tabs 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 Branded Tabs 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.

Branded Tabs Shell

App shellsMIT

View in Storybook

Top-nav app shell with branded logo bar — for marketing-flavored dashboards.

bun add @otfdashkit/ui

Preview

Branded Tabs ShellApp shells

Code

@otfdashkit/ui

import { StackedLayoutBranded } from '@otfdashkit/ui'

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

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

Props

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

Prop	Type	Default
brandName	string	'Acme'
children	ReactNode
className	string

Preview

Code

Props

Related