Page headerlayout
Page header with breadcrumb, static or selector title, subtitle, badges, actions slot and back link that stacks on small screens.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/page-headerDefault
page-header-demo.tsx
import { Button } from "@/components/ui/button";import { PageHeader } from "@/components/ui/page-header";import { StatusBadge } from "@/components/ui/status-badge";
export default function PageHeaderDemo() { return ( <PageHeader breadcrumb={[{ label: "Reservations", href: "#reservations" }, { label: "R-1042" }]} title="Reservation R-1042" subtitle="Created on Nov 3 by the front desk" badges={<StatusBadge tone="success">Confirmed</StatusBadge>} actions={ <> <Button variant="outline">Edit</Button> <Button>Check in</Button> </> } /> );}