import type { Block } from 'payload'import { heroFields } from '@/blocks/shared/heroFields'export const HeroBasic: Block = {  slug: 'heroBasic',  interfaceName: 'HeroBasicBlock',  fields: [    // Shared hero core (eyebrow, title, description, CTA links). Variant-specific    // fields follow; edit the shared shape in @/blocks/shared/heroFields.    ...heroFields,    {      name: 'proofItems',      type: 'array',      admin: {        initCollapsed: true,      },      fields: [        {          name: 'label',          type: 'text',          required: true,        },      ],      maxRows: 4,    },  ],  labels: {    plural: 'Hero Basic Blocks',    singular: 'Hero Basic',  },}

import React from 'react'import type { HeroBasicBlock as HeroBasicBlockData } from '@/payload-types'import { Badge } from '@/components/ui/badge'import { CMSLink } from '@/components/Link'import { cn } from '@/utilities/ui'type Props = HeroBasicBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const HeroBasicBlock: React.FC<Props> = ({  className,  description,  disableInnerContainer,  eyebrow,  id,  links,  proofItems,  title,}) => {  return (    <section className={cn('container', className)} id={id ? `block-${id}` : undefined}>      <div className="overflow-hidden rounded-frame border border-border/70 bg-card/35 px-6 py-10 sm:px-8 lg:px-12 lg:py-14">        <div          className={cn('flex flex-col gap-8', {            'mx-auto max-w-4xl': !disableInnerContainer,          })}        >          <div className="flex flex-col gap-4">            {eyebrow ? (              <Badge variant="outline" className="w-fit rounded-full px-3 py-1 uppercase tracking-eyebrow">                {eyebrow}              </Badge>            ) : null}            <div className="flex max-w-3xl flex-col gap-4">              <h2 className="text-4xl font-medium tracking-display text-balance sm:text-5xl">                {title}              </h2>              <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">                {description}              </p>            </div>          </div>          {links && links.length > 0 ? (            <div className="flex flex-col gap-3 sm:flex-row">              {links.map(({ link }, index) => (                <CMSLink                  key={index}                  appearance={link.appearance === 'outline' ? 'outline' : 'default'}                  {...link}                />              ))}            </div>          ) : null}          {proofItems && proofItems.length > 0 ? (            <div className="flex flex-wrap gap-3">              {proofItems.map(({ label }, index) => (                <Badge key={`${label}-${index}`} variant="secondary" className="rounded-full px-3 py-1 text-sm">                  {label}                </Badge>              ))}            </div>          ) : null}        </div>      </div>    </section>  )}

import type { Field } from 'payload'import { linkGroup } from '@/fields/linkGroup'/** * Shared field core for the Hero component family. * * Every hero variant spreads these fields first and then appends its own * variant-specific ones. Editing the * shared headline/eyebrow/description/CTA shape here updates every installed * hero block at once, so the family never drifts field-by-field across a repo. * * Installed once per repo at `src/blocks/shared/heroFields.ts`; re-running * `payload-components add hero-*` never overwrites a copy you have already edited. */export const heroFields: Field[] = [  {    name: 'eyebrow',    type: 'text',  },  {    name: 'title',    type: 'text',    required: true,  },  {    name: 'description',    type: 'textarea',    required: true,  },  linkGroup({    overrides: {      admin: {        initCollapsed: true,      },      maxRows: 2,      minRows: 1,    },  }),]

Installation

npx payload-components add hero-basic

Copy the files straight from the registry, then wire the Payload fragments by hand:

pnpm dlx shadcn@latest add https://www.payload-components.xyz/r/hero-basic.json

What it installs

Copies 3 source files into your project:

src/blocks/shared/heroFields.tsshared
src/blocks/HeroBasic/config.ts
src/blocks/HeroBasic/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the block	`src/collections/Pages/index.ts`
Maps the renderer	`src/blocks/RenderBlocks.tsx`
Regenerates types	`src/payload-types.ts`
Regenerates the admin import map	`src/app/(payload)/admin/importMap.js`

heroFields.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.

Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.

Content model

The first four fields come from the shared heroFields base; proofItems is specific to this variant.

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the HeroBasic block to its layout.

Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.

Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target: payload-website-starter
Payload: v3
Next.js: 15 / 16
shadcn UI: badge

Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.