Building Custom Blocks in Payload CMS 3: The Complete 2026 Guide

1import type { Block } from 'payload'2 3export const PricingCard: Block = {4  slug: 'pricingCard',5  interfaceName: 'PricingCardBlock',6  fields: [7    { name: 'title', type: 'text', required: true },8    { name: 'price', type: 'number', required: true },9    { name: 'period', type: 'select', options: [10      { label: 'Monthly', value: 'month' },11      { label: 'Yearly', value: 'year' },12    ]},13    { name: 'features', type: 'array', fields: [14      { name: 'text', type: 'text', required: true },15      { name: 'included', type: 'checkbox', defaultValue: true },16    ]},17  ],18}

1import type { PricingCardBlock } from '@/payload-types'2 3export const PricingCard = ({ title, price, period, features }: PricingCardBlock) => (4  <div className="rounded-lg border p-6">5    <h3 className="text-xl font-bold">{title}</h3>6    <p className="text-3xl font-bold mt-2">7      ${price}<span className="text-sm">/{period}</span>8    </p>9    <ul className="mt-4 space-y-2">10      {features?.map((f, i) => (11        <li key={i}>{f.included ? '✅' : '❌'} {f.text}</li>12      ))}13    </ul>14  </div>15)