AppShell

API reference and demos for AppShell.

Source

Import

import { AppShell } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

No Toolbar · Open in Storybook

Compact Mobile Actions · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Right-aligned cluster (icon buttons, settings/org picker, …).
bodyActions	ReactNode	—	Fixed header row, right side (entity actions) — same row as bodyHeader.
bodyBackLabel	string	—	Label of the narrow back bar. Defaults to "Back".
bodyHeader	ReactNode	—	Fixed header row, left side (breadcrumb, title, tabs).
bodyHeaderClassName	string	—	—
bodyPane	enum	—	Pages a narrow body (under 48rem) between bodySidebar and body-main instead of stacking them: only this pane shows, full height. A list/detail host passes "main" while an item is selected and "sidebar" otherwise. Wide layouts always show both panes.
bodySidebar	ReactNode	—	Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main.
bodySplit	number	—	bodySidebar width as a percent when present. Defaults to 24.
brand	ReactNode	—	Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar.
children*	ReactNode	—	Main content (body-main); fills the remaining space and scrolls.
className	string	—	—
collapsedStorageKey	string	—	localStorage key persisting the collapsed state.
collapsedWidth	number	—	Collapsed rail width in px. Defaults to 56.
collapsible	boolean	—	Show the collapse toggle. Defaults to true when a rail is present.
contentClassName	string	—	—
contentWidth	enum	—	Centers content at responsive wide breakpoints, or allows it to fill the workspace.
debugSlots	boolean	—	Outlines every slot in its own colour and labels it with its `data-slot` name — a layout-debugging aid for working out which region owns a given area or scrollbar. Uses `outline`, so enabling it does not shift layout.
defaultCollapsed	boolean	—	Initial collapsed state (uncontrolled).
groupCollapsedStorageKey	string	—	localStorage key persisting per-group collapsed state.
headerClassName	string	—	—
mobileActions	ReactNode	—	Compact action cluster used in the mobile header. Defaults to `actions`.
mobileSidebarLabel	string	—	Accessible label for the mobile navigation drawer. Defaults to "Navigation".
nav	ReactNode	—	Inline primary nav (e.g. tabs) shown after the brand in the top bar.
navSections	AppShellNavSection[]	—	Declarative nav sections rendered into the rail (collapse-aware).
onBodyBack	(…) => void	—	With `bodyPane="main"`, a narrow body shows a back bar that calls this (e.g. to clear the selection).
search	ReactNode	—	Centered search slot; grows to fill and is width-capped.
searchMaxWidth	string | number	—	Max width of the centered search slot. Defaults to 28rem.
sidebar	(…) => …	—	Custom sidebar content; receives the collapsed flag. Overrides navSections.
sidebarClassName	string	—	—
sidebarFooter	ReactNode	—	Pinned to the bottom of the rail (version, account).
sidebarHeader	ReactNode	—	Pinned below the rail header (e.g. a context switcher).
sidebarWidth	number	—	Expanded rail width in px. Defaults to 240.
toolbar	ReactNode	—	Optional second top-bar row for filters / bulk actions.
toolbarClassName	string	—	—