Skip to main content

Interface: AppShellProps

Defined in: components/AppShell/AppShell.tsx:56

Props for the AppShell component.

Extends​

  • Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className">

Properties​

aside?​

optional aside?: ReactNode

Defined in: components/AppShell/AppShell.tsx:65

End-side panel (inspector). Omit for no end aside.

asideLabel?​

optional asideLabel?: string

Defined in: components/AppShell/AppShell.tsx:79

Accessible name for the end aside landmark (aria-label).

asideWidth?​

optional asideWidth?: "sm" | "md" | "lg"

Defined in: components/AppShell/AppShell.tsx:75

Width of the end aside, from the named scale.

Default​

'sm'

children?​

optional children?: ReactNode

Defined in: components/AppShell/AppShell.tsx:100

The main region — always takes the remaining space and scrolls.

Overrides​

Omit.children

optional header?: ReactNode

Defined in: components/AppShell/AppShell.tsx:61

Top bar, spanning the full width above the body. Omit for no header.

isSidebarOpen?​

optional isSidebarOpen?: boolean

Defined in: components/AppShell/AppShell.tsx:96

Whether a temporary sidebar is open. Omit to let the shell own it.

onSidebarOpenChange?​

optional onSidebarOpenChange?: (isOpen) => void

Defined in: components/AppShell/AppShell.tsx:98

Called when a temporary sidebar opens or closes.

Parameters​

ParameterType
isOpenboolean

Returns​

void

optional sidebar?: ReactNode

Defined in: components/AppShell/AppShell.tsx:63

Start-side panel (navigator). Omit for no start sidebar.

sidebarLabel?​

optional sidebarLabel?: string

Defined in: components/AppShell/AppShell.tsx:77

Accessible name for the start sidebar landmark (aria-label).

sidebarTriggerLabel?​

optional sidebarTriggerLabel?: string

Defined in: components/AppShell/AppShell.tsx:94

Accessible name for the button that opens a temporary sidebar — e.g. "Open navigation". Required for temporary to take effect.

sidebarVariant?​

optional sidebarVariant?: AppShellSidebarVariant

Defined in: components/AppShell/AppShell.tsx:89

How the start sidebar occupies the frame.

temporary needs sidebarTriggerLabel to name the button that reveals the panel — without a name the sidebar would be unreachable, so the shell stays permanent rather than hide it (an English default is forbidden by ADR-001, and a scrolling shell beats a lost one).

Default​

'permanent'

sidebarWidth?​

optional sidebarWidth?: "sm" | "md" | "lg"

Defined in: components/AppShell/AppShell.tsx:70

Width of the start sidebar, from the named scale.

Default​

'sm'