AppShell

Application shell: sticky top bar, collapsible 220px rail (collapses to 0; overlay drawer + scrim below 900px), centred main content column.

Prop	Type	Notes
`brand`	`React.ReactNode`	Top-bar brand slot — usually <Wordmark size="sm">.
`member`	`React.ReactNode`	Signed-in member name.
`role`	`React.ReactNode`	Role badge, e.g. "Owner".
`nav`	`AppNavItem[]`
`active`	`string`	Key of the active nav item (gilt keyline treatment).
`onNavigate`	`(key: string) => void`
`actions`	`React.ReactNode`	Top-bar slot before the member name — theme toggle, search.
`className`	`string`
`children`	`React.ReactNode`

Other props pass through to the root element (React.HTMLAttributes<HTMLDivElement>).

Preview

Declarations

TypeScript

export interface AppNavItem {
  key: string;
  label: React.ReactNode;
  /** Numeric badge (e.g. open approvals) — brass: a person is required. */
  count?: number | null;
}

export interface AppShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
  /** Top-bar brand slot — usually <Wordmark size="sm">. */
  brand?: React.ReactNode;
  /** Signed-in member name. */
  member?: React.ReactNode;
  /** Role badge, e.g. "Owner". */
  role?: React.ReactNode;
  nav?: AppNavItem[];
  /** Key of the active nav item (gilt keyline treatment). */
  active?: string;
  onNavigate?: (key: string) => void;
  /** Top-bar slot before the member name — theme toggle, search. */
  actions?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Application shell: sticky top bar, collapsible 220px rail (collapses to 0;
 * overlay drawer + scrim below 900px), centred main content column.
 */
export function AppShell(props: AppShellProps): React.JSX.Element;