Balance Logo
Reckon Design System
Open playroom

App Layout

The app layout package exposes primitives used to compose the layout of a web page.
pnpm add @balance-web/app-layout
Import usage
import {
} from '@balance-web/app-layout';
  • Code
  • API

App layout

The AppLayout component should be the root view component of all your pages. It renders children as flex column.

Page layout, columns and sidebar

The PageLayout component should be used to compose the navigation and main content of your page. It will render children as flex row.

It expects PageLayout.Column and PageLayout.Sidebar as children for the main building blocks, however it does render children as flex so it's possible to compose your own layout using custom elements.


The PageLayout.Column component is used inside PageLayout to create columns in your page content. It renders children as flex column.

By default each PageLayout.Column will fill the remaining space. You can use the optional width to specify a fixed width for a specific column.

Note: Styling of each column for things like dividers, padding and background are up to the consumer.

Edit in Playroom

The PageLayout.Sidebar component is used inside PageLayout. It provides common side bar functionality such as fill height, fixed width and expand/collapse. It renders children as flex column.

Use the SidebarNavigation component inside PageLayout.Sidebar for a complete side bar navigation experience.


The usePageLayout hook is used to get the current state of the sidebar and programatically expand/collapse it.


Combine all the components to achieve certain layouts.

Horizontal navigation + single column body

Horizontal navigation + multi column body

Horizontal navigation + side bar navigation + body

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo