Post Hero

An editorial article header with title, summary, categories, byline, date, and an optional image slot.

v0.1.0Post componentPost familyPost header

Installation

Track the file-only install in a supported Payload project:

npx payload-components add post-hero

What it installs

Copies 1 source file into your project:

  • src/components/PostHero/Component.tsx

This file-only article component adds no Pages registration, renderer mapping, or generated files. Compose it in your article template using the example below.

Re-running the CLI install detects existing source and wiring, then records install state in .payload-components/state.json.

Content model

These are React props supplied by your article template. This component adds no collection fields and does not query content. Your template owns data loading, access control, draft handling, and localization. Resolve relationship IDs before supplying public display data.

Prop

Type

Usage

Import the component into your article template and pass public display content as props. The install adds no admin fields. Your template controls content loading and publishing.

import { PostHero } from '@/components/PostHero/Component'
import { Media } from '@/components/Media'
import type { Post } from '@/payload-types'

export function ArticleHeader({ post }: { post: Post }) {
  return (
    <PostHero
      title={post.title}
      description={post.meta?.description}
      publishedAt={post.publishedAt}
      categories={(post.categories ?? []).flatMap((category) =>
        typeof category === 'object' && category?.title ? [category.title] : [],
      )}
      author={post.populatedAuthors
        ?.map((author) => author.name)
        .filter(Boolean)
        .join(', ')}
      image={
        post.heroImage && typeof post.heroImage === 'object' ? (
          <Media resource={post.heroImage} />
        ) : undefined
      }
    />
  )
}

Replace the existing article heading with this header so the page retains a single h1. Request populated categories and media in your existing query; unpopulated relationship IDs are intentionally omitted. The image element owns its alt text and sizing.

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3
Next.js
15 / 16
shadcn UI
none

Direct shadcn installation needs React 19 and Tailwind with your theme tokens; this component has no Payload runtime imports. The targets above apply to CLI install tracking.

Your project must already expose components.json, src/payload.config.ts — the host shape checked by payload-components add. The CLI verifies this against the support matrix before touching anything.