Component block
Places a reusable band from the Components collection on a page.
On this page
The Component block places a document from the Components collection on a page, so a band authored once appears wherever it is used.
Where it is offeredLink to this section
Offered only by rootLexicalEditor({ withComponent: true }), while the Components collection is enabled. The default page content enables it. A component's own root editor passes withComponent: false to prevent recursive component references.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
component | relationship | Select a component | Required; Related to components | |
isOverwritten | checkbox | Customize content | false | Shown when Boolean(siblingData?.component) |
overwriteContent | richText | Shown when Boolean(siblingData?.component)&&siblingData?.isOverwritten===true |
Rendered outputLink to this section
Renders the referenced component's content in place, or the per-page override when enabled. There is no matching standalone React component: the stored blocks render their own components.
ConverterLink to this section
componentConverter uses overwriteContent when isOverwritten is true and that editor state exists. Otherwise it reads the populated relationship's content. It returns nodesToJSX directly, without adding a wrapper, and returns nothing if neither source has children. It does not fetch a document itself.
CustomizingLink to this section
Import ComponentBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing component slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.