Application shell

AppFrame is Flab's signature exterior: the whole app on a warm-grey canvas inside a large rounded card that floats with one soft shadow. It lays out the Sidebar, Topbar and a scrolling main area with a CSS grid. Because AppFrame is full-screen, the pieces are shown here in bounded boxes — see Blocks for the real thing.

AppFrame fills the viewport, so it is best seen live. The Showcase screens assemble AppFrame, Sidebar and Topbar into full application layouts.

Sidebar

<Sidebar>  <SidebarHeader>Northwind</SidebarHeader>  <SidebarBody>    <NavGroup label="Workspace">      <NavItem icon={<LayoutDashboard className="size-4" />} label="Dashboard" active />      <NavItem icon={<ShoppingCart className="size-4" />} label="Orders" count={8} />      <NavItem icon={<Users className="size-4" />} label="Customers" />    </NavGroup>    <NavGroup label="Insights" collapsible>      <NavItem icon={<BarChart3 className="size-4" />} label="Analytics" />    </NavGroup>    <NavGroup label="Preferences" collapsible indented>      <NavItem label="Profile" />      <NavItem label="Notifications" />      <NavItem label="Billing" />    </NavGroup>  </SidebarBody>  <SidebarFooter>    <NavItem icon={<LifeBuoy className="size-4" />} label="Help" />    <NavItem icon={<Cog className="size-4" />} label="Settings" />  </SidebarFooter></Sidebar>

NavItem is polymorphic: pass render={<Link href="/…" />} to make it navigate without this package depending on a router.

Add collapsible to turn a NavGroup label into a toggle. It is open by default; set defaultOpen={false} to start collapsed, or drive it with open and onOpenChange. Pair it with indented when the group is really a submenu of its label — the items shift one level right so the hierarchy reads at a glance.

NavGroup props

Prop	Type	Default	Notes
`label`	`string`	—	Uppercase section label. Required to collapse.
`collapsible`	`boolean`	—	Makes the label a toggle for the group items. Defaults to false.
`defaultOpen`	`boolean`	—	Initial open state when uncontrolled. Defaults to true.
`open`	`boolean`	—	Controlled open state; pair with onOpenChange.
`onOpenChange`	`(open: boolean) => void`	—	Fires with the next state when the user toggles.
`indented`	`boolean`	—	Indents the items by one level so they read as a submenu of the label. Defaults to false.

Topbar

Dashboard

<Topbar>  <TopbarTitle>Dashboard</TopbarTitle>  <TopbarSpacer>    <SearchInput placeholder="Search…" />  </TopbarSpacer>  <TopbarActions>    <Button variant="secondary" size="sm">Invite</Button>    <Avatar name="Ada Okafor" size="sm" />  </TopbarActions></Topbar>

AppFrame props

Prop	Type	Default	Notes
`sidebar`	`ReactNode`	—	Fixed left navigation region.
`topbar`	`ReactNode`	—	Optional header row.
`panel`	`ReactNode`	—	Optional right-hand detail panel; collapses when absent.
`children`	`ReactNode`	—	The scrolling main area.