Blocks

Page header

A title, context and primary action.

Workspace

Projects

What I’m working on.

Install

npx shadcn@latest add http://localhost:3000/r/page-header.json

Dependencies: button, badge

Usage

import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"

export function ProjectsHeader() {
  return (
    <PageHeader
      eyebrow="Workspace"
      title="Projects"
      description="What I’m working on."
      action={<Button render={<a href="/projects/new" />}>New project</Button>}
    />
  )
}

API

Prop	Type	Notes
`title`	string · required	Page title (h1).
`eyebrow`	string	Optional badge.
`description`	string	Supporting text.
`action`	ReactNode	Custom action. Defaults to an unbound Create new button.

Source code +

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

type PageHeaderProps = {
  eyebrow?: string
  title: string
  description?: string
  action?: React.ReactNode
}

export function PageHeader({ eyebrow, title, description, action }: PageHeaderProps) {
  return (
    <header className="flex flex-col gap-5 border-b pb-6 sm:flex-row sm:items-end sm:justify-between">
      <div className="flex max-w-2xl flex-col gap-2">
        {eyebrow ? <Badge variant="secondary">{eyebrow}</Badge> : null}
        <h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
        {description ? <p className="text-sm leading-6 text-muted-foreground">{description}</p> : null}
      </div>
      {action ?? <Button>Create new</Button>}
    </header>
  )
}

Registry JSON ↗