AdminShell

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

Operations Shell

View 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.