Page

A page shell with an optional header — title or breadcrumbs, subtitle, a visual, a badge, and actions — plus a content area that can be padded.

Beta

Manage your subscription and invoices

Page content goes here.

Installation

pnpm dlx shadcn@latest add @syncblocks/page

Usage

import { Page } from "@/components/ui/page"

<Page title="Settings" subtitle="Manage your account">
  <div>{/* page content */}</div>
</Page>

Examples

Default

A plain title and subtitle, no header extras.

Settings

Manage your account

Page content goes here.

With Subtitle

A secondary line under the title.

Billing

Manage your subscription and invoices

Page content goes here.

With Breadcrumbs

Pass breadcrumbs to replace the plain title with a breadcrumb trail — the last item renders as the current page, and badge (if set) appears next to it instead of next to the title.

Page content goes here.

With Badge & Actions

A decorative visual, a badge next to the title, and right-aligned actions.

Billing

Beta

Page content goes here.

Without a Header

Set hasHeader={false} to omit the header entirely and render only the content area.

Full-bleed content, no header.

Title Only

The minimal header — just a title, no subtitle or extras.

Dashboard

Page content goes here.

Multiple Actions

actions accepts any node — group several buttons for related operations.

Report

Q3 2026 performance

Page content goes here.

Scrollable Content

The header stays fixed while the content area scrolls on overflow. hasPadding adds inset spacing.

Changelog

The header stays fixed while content scrolls

Release 12.0

Notes for this release.

Release 11.0

Notes for this release.

Release 10.0

Notes for this release.

Release 9.0

Notes for this release.

Release 8.0

Notes for this release.

Release 7.0

Notes for this release.

Release 6.0

Notes for this release.

Release 5.0

Notes for this release.

Release 4.0

Notes for this release.

Release 3.0

Notes for this release.

Release 2.0

Notes for this release.

Release 1.0

Notes for this release.

Full Configuration

Every prop combined — visual, breadcrumbs, subtitle, badge, actions, and hasPadding.

Beta

Manage your subscription and invoices

Page content goes here.

API Reference

Prop	Type	Default	Description
`title`	`React.ReactNode`	-	Page title. Ignored when `breadcrumbs` has entries.
`subtitle`	`React.ReactNode`	-	Secondary line shown under the title or breadcrumbs.
`breadcrumbs`	`{ id?: string; label: string; href?: string; onClick?: () => void }[]`	-	Renders a breadcrumb trail in place of the plain title; the last item is the current page. An empty array falls back to `title`. A crumb with `onClick` renders as a button and handles the click in-app, ignoring `href`.
`visual`	`React.ReactNode`	-	Decorative visual shown left of the title/breadcrumbs. Hidden from assistive technology — must not convey meaningful information.
`badge`	`React.ReactNode`	-	Shown next to the title, or next to the last breadcrumb when `breadcrumbs` is set.
`actions`	`React.ReactNode`	-	Right-aligned actions in the header. Wraps on narrow viewports.
`hasHeader`	`boolean`	`true`	Set to `false` to omit the header entirely.
`hasPadding`	`boolean`	`false`	Adds padding to the content area.
`contentClassName`	`string`	-	Additional classes applied to the content `<main>`, for layout needs beyond `hasPadding`.
`className`	`string`	-	Additional CSS classes applied to the root element.
`children`	`React.ReactNode`	-	Content area, rendered inside a `<main>` landmark labelled by the page heading.

PageProps also extends React.ComponentPropsWithoutRef<"div">, so native attributes (id, data-*, aria-*, etc.) can be passed directly to the root element.

Data Search Password Input