Example 1: Modern collapsible sidebar

Collapsed by default (icons only), expands on hover with dynamic content per section. Pin to keep expanded.

Modern sidebar layout

Hover icons to expand, click pin to keep open

This white content area automatically adjusts as the sidebar expands/collapses. The grey background provides contrast, and this content container has padding, border, border-radius, and shadow.

Key Features:

  • White background with rounded corners
  • Light grey border and subtle shadow
  • Padding for comfortable content spacing
  • Sits on grey background for visual depth

Example 2: Shadcn sidebar (groups + accordions)

Uses `SidebarProvider`, `Sidebar`, and groups with an accordion to show how filters or sections can live in the sidebar.

Main content

Controlled by `SidebarProvider` and `SidebarTrigger`.

This white content area has padding, border, border-radius, and shadow. It sits on a grey background. Resize the window to test collapsible behavior, or click the trigger to toggle collapsed state.

Example 3: Top bar only

Uses only `TopBar` in `AppShell` with no sidebar, keeping the logo in the app bar for apps that don't need a side nav.

CP

Top bar only layout

Ideal for simple tools without a sidebar.

Top bar only layout

This white content area has padding, border, border-radius, and shadow. It sits on a grey background and uses the same styling tokens, but without any sidebar.

Example 4: Simple shell (Combined)

Uses `AppShell` with `SidebarRoot` + `SidebarNavItem` and `TopBar`. Click items to change the active state, and use the button to collapse the sidebar.

AppShell + SidebarRoot

Simple navigation with active item state.

Active section: dashboard

This white content area has padding, border, border-radius, and shadow. It sits on a grey background and automatically adjusts as the sidebar collapses or expands.