Author Card

An article author profile with optional avatar, role, biography, and profile link.

v0.1.0Post componentAuthor familyByline

Installation

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

npx payload-components add author-card

What it installs

Copies 1 source file into your project:

  • src/components/AuthorCard/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 { AuthorCard } from '@/components/AuthorCard/Component'

// Compose after the article body in your existing post template.
// Pass only public profile fields from your author data.
export function ArticleAuthor() {
  return (
    <AuthorCard
      name="Alex Morgan"
      role="Editor & developer"
      bio="Building thoughtful publishing tools and sharing what we learn."
      href="/authors/alex-morgan"
    />
  )
}

The starter author hook exposes names through populatedAuthors. Role, biography, avatar, and profile URLs are optional additions owned by your project; this install does not create an Authors collection or expose private Users fields. Pass your Media or Image element as avatar when available.

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.