---
title: "Component block"
description: "Places a reusable band from the Components collection on a page."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/payload/blocks/component
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/llms.txt
---
> This page isn't translated yet. Showing English.


The Component block places a document from the [Components collection](https://docs.systhema.app/sk/payload/content/components.md) on a page, so a band authored once appears wherever it is used.

![The component block fields in the Payload editor](./images/component.light.webp)

## Where it is offered

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.

## Fields

<!-- generated:block-fields component -->

| 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` |

<!-- /generated -->

## Rendered output

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](https://docs.systhema.app/sk/components.md).

## Converter

`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.

## Customizing

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](https://docs.systhema.app/sk/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/sk/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/sk/payload/frontend/live-preview/client-mode.md).

## Related

- [Components collection](https://docs.systhema.app/sk/payload/content/components.md)