Under active development — things may change.

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. This page covers the most common ways to adapt blocks to fit your project.

Adjusting Spacing and Typography

Blocks use CSS variables for all spacing and typography. This means global adjustments are simple — override a variable in one place and every block on the page updates automatically.

For example, to tighten the spacing between all sections:

CSS
1:root {
2  --fluid-section: var(--space-2xl);        /* tighter section spacing */
3}

The same approach works for card padding, border radius, and the gaps between items inside a block:

CSS
1:root {
2  --fluid-surface-padding: var(--space-s);  /* smaller card padding */
3  --surface-radius: 1rem;                   /* less rounded surfaces */
4  --fluid-component-gap: var(--space-xs);   /* tighter gaps between items */
5}

These variables are part of the fluid design system, which has a full list of available tokens and what they control.

To adjust a specific block rather than the whole system, edit the classes directly in that block's component.tsx. Blocks use the cn utility (from shadcn/ui) for conditional class merging:

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

Adding or Removing Fields

Each block has two files: config.ts defines the fields that appear in the Payload admin panel, and component.tsx renders the block using those field values.

To add a field:

  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 keep your TypeScript types in sync.

Changing Default Values

Field defaults are set in config.ts using the defaultValue property. This includes the design fields — you can change a block's default spacing from "comfortable" to "compact", or its default alignment from "center" to "start", directly in the config.

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 — key capabilities in a grid or list layout
  • Testimonials — customer quotes to build trust
  • CTA — a closing call-to-action to drive conversions

Because every block draws from the same spacing scale and color tokens, they look cohesive when stacked on a page without manual adjustments. The spacing between sections is handled by the design system, and colors stay consistent through your project's theme. See Theming for more on how colors work across blocks.

Tips

  • Start from a variation — each block page shows multiple variations with different content and layouts. Pick the closest one and modify from there.
  • Check the fields table — every block page includes a fields reference showing what each field controls.
  • Regenerate types after config changes — run pnpm payload generate:types whenever you modify a block's config.ts so your component stays type-safe.
  • Override tokens, not classes — when adjusting spacing across all blocks, change the CSS variable rather than editing individual component files. It is faster and keeps everything consistent.