Componentnavigation0.56 KB gzipZero dependencies

PageHeader

Page title with stamp entrance, fading description, actions slot and optional mono eyebrow.

Preview

Live Preview

Header

Page Title

Page description goes here

Export

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add page-header

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

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

<PageHeader title="Box Office" eyebrow="Manage" description="Today&apos;s sales at a glance." />

Usage guidance

Use PageHeader when a ticket stub surface needs Page title with stamp entrance, fading description, actions slot and optional mono eyebrow. Keep props minimal and prefer composition with sibling stubs.

Avoid PageHeader for long form flows or dense data grids where a dedicated layout block fits better.

Source code

page-header.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface PageHeaderProps {
  title: string;
  description?: string;
  actions?: React.ReactNode;
  eyebrow?: string;
  className?: string;
}

export function PageHeader({
  title,
  description,
  actions,
  eyebrow,
  className,
}: PageHeaderProps) {
  const titleClasses = "font-mono text-[15px] font-bold uppercase tracking-[0.1em]";
  const descClasses = "mt-1 text-sm text-muted-foreground";

  return (
    <header
      className={cn(
        "flex flex-col sm:flex-row gap-4 mb-6",
        "motion-reduce:transition-none",
        className
      )}
    >
      <div className="flex-1">
        {eyebrow && (
          <div className="mb-2 mono-uppercase stamp">
            <span className="text-[9px] font-mono text-muted-foreground uppercase tracking-[0.15em]">
              {eyebrow}
            </span>
          </div>
        )}
        <h2 className={cn(titleClasses, "animate-[stamp_0.4s_ease-out_both]")}>
          {title}
        </h2>
        {description && (
          <p className={cn(descClasses, "animate-[fade-in_0.3s_ease-out_both]")}>
            {description}
          </p>
        )}
      </div>
      {actions ? (
        <div className="self-end sm:self-auto animate-[fade-in-up_0.3s_ease-out_both]">
          {actions}
        </div>
      ) : null}
    </header>
  );
}

Props

Prop	Type	Description
title	string
description?	string
actions?	React.ReactNode
eyebrow?	string
className?	string