import type { Block } from 'payload'export const ContentList: Block = {  slug: 'contentList',  interfaceName: 'ContentListBlock',  fields: [    {      name: 'eyebrow',      type: 'text',    },    {      name: 'title',      type: 'text',      required: true,    },    {      name: 'items',      type: 'array',      required: true,      minRows: 2,      maxRows: 6,      admin: {        initCollapsed: true,      },      fields: [        {          name: 'term',          type: 'text',          required: true,        },        {          name: 'description',          type: 'textarea',          required: true,        },      ],    },  ],  labels: {    plural: 'Content List Blocks',    singular: 'Content List',  },}

import React from 'react'import type { ContentListBlock as ContentListBlockData } from '@/payload-types'import { Badge } from '@/components/ui/badge'import { cn } from '@/utilities/ui'type Props = ContentListBlockData & {  id?: string  className?: string  disableInnerContainer?: boolean}export const ContentListBlock: React.FC<Props> = ({  className,  disableInnerContainer,  eyebrow,  id,  items,  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('grid gap-8 lg:grid-cols-2 lg:gap-16', {            'mx-auto max-w-3xl': !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}            <h2 className="font-serif text-4xl font-medium text-balance">{title}</h2>          </div>          {items && items.length > 0 ? (            <div className="flex flex-col gap-6">              {items.map((item, index) => (                <p className="text-muted-foreground" key={item.id ?? `${item.term}-${index}`}>                  <span className="font-medium text-foreground">{item.term}</span> {item.description}                </p>              ))}            </div>          ) : null}        </div>      </div>    </section>  )}

Installation

npx payload-components add content-list

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/content-list.json

What it installs

Copies 2 source files into your project:

src/blocks/ContentList/config.ts
src/blocks/ContentList/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`

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

Content model

This serif "list" variant uses its own fields (not the shared contentFields base): a heading beside a list of labeled-term paragraphs.

Prop

Type

Each item in items carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the ContentList 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.