Customization

Every block you copy into your project is yours to modify. There is no package to update and no abstraction layer to work around.

Styling

Blocks use Tailwind CSS utility classes. To change spacing, colors, typography, or layout, edit the classes directly in component.tsx.

The cn utility (from shadcn/ui) is used for conditional class merging:

1className={cn(
2  'text-4xl font-bold',
3  textAlignment === 'center' && 'text-center'
4)}

Adding or Removing Fields

To add a field, update both files:

1. Add the field definition in config.ts
2. Use the field value in component.tsx

To remove a field, do the reverse — delete it from the config and remove any references in the component.

After changing fields, run pnpm payload generate:types to regenerate TypeScript types.

Changing Default Values

Field defaults can be set in config.ts using the defaultValue property on any field.

Combining Blocks

Blocks are designed to work well together. A typical landing page might use:

• Hero — above-the-fold section with headline, subtext, and CTA buttons
• Logos — a scrolling or static row of client/partner logos for social proof
• Features — highlight key capabilities in a grid or list layout
• Testimonials — customer quotes to build trust
• CTA — a closing call-to-action to drive conversions

Since every block uses the same Tailwind theming tokens and spacing conventions, they look cohesive when stacked on a page without extra work.

Tips

• Start from a variation — each block page shows multiple variations with different content and layouts. Pick the one closest to what you need and modify from there.
• Check the fields table — every block's documentation page includes a fields reference so you know exactly what each field controls.
• Run pnpm payload generate:types after changes — whenever you modify config.ts, regenerate types so your component stays type-safe.