GitHub

Go to...

Choose a page to open.

A page title with an eyebrow line and an actions slot over a Sky background.

Page Header

page-header-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/page-header.json

Usage

import { PageHeader } from "@/components/page-header";
<PageHeader
  title="Projects"
  eyebrow="Acme Inc"
  actions={<Button size="sm">New project</Button>}
/>

Examples

Compact

Set compact to reduce the title size and the top padding.

page-header-compact