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.

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.

With Subtitle

A secondary line under the title.

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.

With Badge & Actions

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

Without a Header

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

Title Only

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

Multiple Actions

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

Scrollable Content

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

Full Configuration

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

API Reference