The AdminShell component gives internal tools a stable app frame for navigation, workspace controls, and dense operational content.

Import

import {
  AdminShell,
  AdminShellBody,
  AdminShellHeader,
  AdminShellMain,
  AdminShellPanel,
  AdminShellSidebar,
} from '@nim-ui/components';

Basic Usage

Exception queue

Orders

Review risk signals, assignment gaps, and fulfillment blockers before warehouse cutoff.

Open orders

184

High risk

SLA breach

Code

<AdminShell>
  <AdminShellBody>
    <AdminShellSidebar aria-label="Backoffice navigation">
      <SidebarNav aria-label="Backoffice navigation">{/* sections */}</SidebarNav>
    </AdminShellSidebar>
    <AdminShellPanel>
      <AdminShellHeader>{/* workspace controls */}</AdminShellHeader>
      <AdminShellMain>{/* page content */}</AdminShellMain>
    </AdminShellPanel>
  </AdminShellBody>
</AdminShell>

Props

AdminShell

Name	Type	Default	Description
`density`	`'comfortable' \| 'compact'`	`'comfortable'`	Controls shell sidebar and topbar sizing tokens.
`className`	`string`	-	Additional classes for shell height, background, or layout boundaries.

AdminShellSidebar and AdminShellHeader

Name	Type	Default	Description
`sticky`	`boolean`	`true`	Keeps the sidebar or topbar fixed while the page content scrolls.
`aria-label`	`string`	-	Use on AdminShellSidebar when it contains primary navigation.

Backoffice Guidance

Put global navigation in AdminShellSidebar and workspace-level controls in AdminShellHeader.
Keep AdminShellMain focused on the current workflow: page header, toolbar, table, details, and alerts.
Use density="compact" for high-frequency operator screens where vertical space matters.

AdminShell

Import

Basic Usage

Props

AdminShell

AdminShellSidebar and AdminShellHeader

Backoffice Guidance

On this page