Intro

Installation

npx shadcn@latest add https://payload-bricks.bblank.dev/r/intro-field.json

Usage

example-config.ts

import { introField } from "@/fields/intro"
import type { Block } from "payload"

export const ExampleBlock: Block = {
  slug: "example",
  interfaceName: "Example",
  fields: [
    // your other fields
    introField,
  ],
}

example-block.tsx

import { Intro } from "@/components/intro"
import type { Example } from "@/payload-types"

export function ExampleBlock(props: Example) {
  return props.intro ? <Intro {...props.intro} /> : null
}

Field structure

name	type
`headline`	group	headline field
`richText`	rich text	rich text field
`buttons`	array	button group field

The component uses --spacing-description, --spacing-actions, and --spacing-buttons. The registry also installs the remaining spacing tokens so blocks can share the same spacing scale. The spacing scale can be customized inside of globals.css.

Installation

Usage

Field structure

Customization

On this page