PageHeader Component

Canonical icon-badge page header used across all verticals (app/cms/pay). Replaces ~29 hand-rolled inline icon+title+subtitle header blocks.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Example:

Preview

People

Import/export or manually manage people records in your organization

Props

Component accepts the following props for configuration and behavior.

Prop	Type	Required	Default	Description
icon	string	Required	—	Icon name from the Icon component library
iconColor	string	Required	—	Tailwind text color class for the icon (e.g. "text-indigo-500")
iconBgColor	string	Required	—	Tailwind background color class for the icon badge (e.g. "bg-indigo-50")
title	string	Required	—	Page title text
subtitle	string	Required	—	Short descriptive subtitle below the title
actions	ReactNode	Optional	—	Action buttons rendered on the right side of the header

Type Definitions

PageHeaderProps

Configuration interface for PageHeader component

interface PageHeaderProps {
  icon: string
  iconColor: string
  iconBgColor: string
  title: string
  subtitle: string
  actions?: ReactNode
}

Usage Examples

Common patterns and implementation examples.

Groups List Page

import { PageHeader } from '@/components/shared/page-header'

export default function GroupsPage() {
  return (
    <div className="w-full max-w-[1440px] min-w-[320px] px-[74px] mx-auto pt-4 pb-4">
      <PageHeader
        icon="circle-pile"
        iconColor="text-indigo-500"
        iconBgColor="bg-indigo-50"
        title="Groups"
        subtitle="Organize and manage your school community groups"
        actions={<Button>New Group</Button>}
      />
      {/* table content */}
    </div>
  )
}