ApplicationShell13

1.0.0

Top navigation dashboard shell with search, org and user menus, dropdown nav groups, a mobile drawer, and a bottom bar.

npx jabkit add application-shell13

Component Data

ID: application-shell13
Category: dashboard
Version: 1.0.0
Added: 2026-09-05
Type: block
Keyboard nav: Yes
Reduced motion: Yes

dashboardapplication-shellnavigationheaderdropdownsearchorganizationmobile

Dependencies

clsx
tailwind-merge

Examples

Default

<div className="min-h-dvh bg-background">
      <ApplicationShell13 {...applicationShell13Mocks.default} />
    </div>

Variants

<ApplicationShell13 {...applicationShell13Mocks.alternate}>
      <div className="flex flex-col gap-4">
        <h1 className="text-2xl font-medium tracking-tight">Pulse</h1>
        <p className="text-sm text-muted-foreground">
          A quieter workspace view with fewer alerts and a different org.
        </p>
      </div>
    </ApplicationShell13>