Utility Route Header
Compact route-level header block for counts, timestamps, and actions on operational pages.
Copy a concise page brief or the full MDX source without digging through the docs shell.
Release queue
Keep route context compact and operational.
Use the utility header for queue counts, route actions, and current cadence without turning the page into a hero.
- Items
- 24
- Open
- 5
- Updated
- 12 min ago
- Owner
- Design systems
UtilityRouteHeader is the compact top band for internal routes, queues, and workspaces. It carries route identity, a short structural description, quiet counts, and a small action cluster without turning the page into a hero.
Installation
Purchase access, then open /account/install to issue a registry token.Usage
import { UtilityRouteHeader } from "@/registry/swiss/blocks/utility-route-header"<UtilityRouteHeader
eyebrow="Feedback index"
title="Review local captures in one clean queue."
description="Evidence-first triage for saved feedback folders."
stats={[
{ label: "Captures", value: "12" },
{ label: "Images", value: "28" },
]}
/>Why This Block Exists
Internal routes need context, but they do not need a marketing opener. This block keeps route facts, counts, and actions compact so the page can move quickly into the real artifact.
Examples
Default
Release queue
Keep route context compact and operational.
Use the utility header for queue counts, route actions, and current cadence without turning the page into a hero.
- Items
- 24
- Open
- 5
- Updated
- 12 min ago
- Owner
- Design systems
In Context
Audit register
One compact route band can carry the page.
The header should establish scope, counts, and route-level actions. The artifact below should do the rest.
- Runs
- 8
- Warnings
- 3
- Failures
- 1
Guidance
- Use it when the page needs route context, counts, and a few actions.
- Keep the description short. The page body should prove the work.
- Let facts stay factual. Do not convert routine metadata into slogans.
API Reference
UtilityRouteHeader
| Prop | Type | Default |
|---|---|---|
eyebrow | string | "Route" |
title | string | required |
description | string | undefined |
stats | Array<{ label: string; value: ReactNode; detail?: ReactNode; href?: string; tone?: ... }> | [] |
actions | ReactNode | undefined |
className | string | undefined |