Layout primitivesPage

Page.

Page is the outer frame for a screen. It sets the max width and gutters, renders a header with title, metadata, and actions, and lays out a body with an optional aside on either side.

TypeScriptRenders div > header + div.gridAccepts native props

When to reach for it

Usage

Page is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.

  • Every top-level route in an application shell.
  • Detail screens that pair primary content with a summary or activity rail.
  • Settings and list pages that need a consistent title and action area.
Import
import { Page } from "@/components/ui/page";

In practice

Examples

Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.

Project overview

A complete screen: header with metadata and actions, a stat grid in the body, and a detail rail as the aside. The New task button updates the aside.

Design system rollout

Active
Migrating every product surface to the shared component library.
Revenue+12.4%
$48,920
Active users+3.1%
3,214
Conversion+0.6%
4.8%

Recent activity

Mara Okafor approved the spacing audit

2m

Jonas Lindqvist opened PR #412 · Page aside

18m

Priya Natarajan commented on Dashboard v2

1h

Theo Marchetti shipped Grid responsive map

3h

Size, aside width, and position

The dashed outline marks the Page element so the max width is visible inside the preview.

Playground

Workspace settings

Manage members, billing, and integrations.
Content
Size
Aside position
Aside width

Reference

Props

Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.

PropTypeDefault
size

Maximum content width: 48rem, 64rem, 80rem, 1600px, or none.

"sm" | "md" | "lg" | "xl" | "full""lg"
gutter

Responsive horizontal padding (1rem, 1.5rem at sm, 2rem at lg).

booleantrue
Header.title

Rendered as the page h1.

ReactNode—
Header.description

Supporting copy below the title.

ReactNode—
Header.metadata

Badges or status rendered inline after the title.

ReactNode—
Header.actions

Primary actions, usually wrapped in Page.Actions.

ReactNode—
Body.aside

Supplementary column. Stacks below the content under lg.

ReactNode—
Body.asideWidth

Aside width at lg and above: 16rem, 20rem, or 24rem.

"sm" | "md" | "lg""md"
Body.asidePosition

Which side the aside sits on at lg and above. The content always keeps the flexible track and comes first in reading order.

"start" | "end""end"
Body.asideLabel

Accessible name for the aside landmark.

string"Supplementary information"

Good to know

Notes

  • Page.Header always renders an h1. Headings inside the body should start at h2.
  • Empty slots render nothing: aside={false}, metadata={0}, or an empty description leave no wrapper and no stray text.
  • PageRoot, PageHeader, PageActions, and PageBody are also exported standalone for custom composition.