PageShell

The page frame: header band, summary row, content.

The frame for one page: a full-width header band, an optional row of summary cards inside it, and the content below. Every part is a thin <div>, so use only the ones you need.

export const client = "only";

import {
  PageShell,
  PageShellHeader,
  PageShellHeading,
  PageShellTitle,
  PageShellDescription,
  PageShellHeaderEnd,
  PageShellMeta,
  PageShellActions,
  PageShellSummary,
  PageShellSummaryCard,
  PageShellContent,
} from "@squadbase/vantage/components";
import { Button } from "@squadbase/vantage/ui";
import { TrendingUp } from "lucide-react";

export default function Example() {
  return (
    <PageShell className="w-[44rem] rounded-xl border">
      <PageShellHeader className="py-8">
        <PageShellHeading>
          <PageShellTitle>売上ダッシュボード</PageShellTitle>
          <PageShellDescription>直近 6 か月の推移</PageShellDescription>
        </PageShellHeading>
        <PageShellHeaderEnd>
          <PageShellMeta>最終更新 10 分前</PageShellMeta>
          <PageShellActions>
            <Button variant="outline" size="sm">
              エクスポート
            </Button>
          </PageShellActions>
        </PageShellHeaderEnd>
        <PageShellSummary>
          <PageShellSummaryCard accent="accent">
            <TrendingUp />
            <div>関東が全体の 52% を占めています。</div>
          </PageShellSummaryCard>
          <PageShellSummaryCard accent="amber">
            <TrendingUp />
            <div>九州は 3 か月連続で減少しています。</div>
          </PageShellSummaryCard>
        </PageShellSummary>
      </PageShellHeader>
      <PageShellContent className="p-6 text-sm text-muted-foreground">
        ここに本文が入ります。
      </PageShellContent>
    </PageShell>
  );
}

import {
  PageShell,
  PageShellHeader,
  PageShellHeading,
  PageShellTitle,
  PageShellDescription,
  PageShellHeaderEnd,
  PageShellMeta,
  PageShellActions,
  PageShellSummary,
  PageShellSummaryCard,
  PageShellContent,
  pageShellSummaryCardVariants,
} from "@squadbase/vantage/components";

Parts

Part	Role
`PageShell`	The outer stack
`PageShellHeader`	The underlined header band: heading on the left, `HeaderEnd` on the right
`PageShellHeading` / `PageShellTitle` / `PageShellDescription`	The heading block
`PageShellHeaderEnd`	The right-hand stack
`PageShellMeta`	Asides such as “updated 10 minutes ago”
`PageShellActions`	The button row
`PageShellSummary`	A grid of summary cards, full width inside the header
`PageShellSummaryCard`	One summary card; `accent` colours it
`PageShellContent`	The body

PageShellSummaryCard’s accent is default / accent / amber / blue / emerald / red. accent uses the theme’s --chart-1, so it follows your tokens.

Use it from a layout

Rather than repeating it per page, put it in _layout.tsx and share it — see Routing.