AdminShell

templates

Outer shell — horizontal layout: Sidebar (247px) + Content (flex). 12px gap, 12px padding around. Min-height 100vh. Sticky sidebar.

ARIA Role: none (layout container)

Demo

Demo for AdminShell (templates)

Outer shell — horizontal layout: Sidebar (247px) + Content (flex). 12px gap, 12px padding around. Min-height 100vh. Sticky sidebar.

Props

PropTypeRequiredDefaultDescription
sidebarReact.ReactNodeYes—
childrenReact.ReactNodeYes—

TypeScript Interface

interface AdminShellProps {
  sidebar: React.ReactNode;
  children: React.ReactNode;
}

Assertions (NASA Rule 5)

  • [type]sidebar and children required(NASA Rule 5)
  • [render]Must be horizontal flex with sidebar sticky and content flex-1(NASA Rule 6)

Usage

Import

import { Adminshell } from '@epasslive/design-system'

Basic

<Adminshell />

With Variants

<Adminshell variant="primary" size="md" />