---
title: "Components collection"
description: "Reusable content components and the Component block."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/payload/content/components
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


The Components collection stores reusable content bands. Reference a document with a Component block to render the same content on several pages.

## Turning it on or off

Components are enabled by default. Set `components: false` to remove the collection and its insertion option from page editors. Turning it off does not convert existing references into independent page content.

## Fields and stored content

Each document has a required `title` and a `content` Lexical state. Its content uses `rootLexicalEditor({ withComponent: false })`, so it can contain page-level layout blocks but cannot reference another Component through the built-in picker. The title identifies the document in Admin; the converter renders the content without adding that title to the page.

The collection supports ordering, trash, drafts, scheduled publishing and 15 retained versions per document. Autosave waits 800 ms after a change.

## The Component block

The [Component block](https://docs.systhema.app/ar/next/payload/blocks/component.md) stores a relationship to the reusable document. The default page content offers it through `rootLexicalEditor({ withComponent: true })`. Other root editors must enable that option explicitly.

Selecting **Customize content** enables `isOverwritten` and the page-local `overwriteContent` editor. The frontend uses that state instead of the shared content. This is useful for a one-off variation, but later edits to the shared document no longer supply that instance's rendered content. The original relationship remains stored.

![A reusable Component document with title and content fields](./images/component.light.webp)

## Access and preview

Public reads expose published components. Authenticated operations require the corresponding `components.read`, `components.create`, `components.update` or `components.delete` capability. Preview uses the document ID, rather than a page slug. See [Live preview](https://docs.systhema.app/ar/next/payload/frontend/live-preview.md) for server and client behavior.

## Rendering

Resolve the component relationship to a document before conversion. `componentConverter` reads its `content.root.children`, or `overwriteContent.root.children` when enabled, and calls `nodesToJSX`. An unresolved ID has no content to render. Nested blocks therefore use the same converters as page content.

## Revalidation

The collection installs change and delete hooks intended to revalidate referencing pages. See [Revalidation](https://docs.systhema.app/ar/next/payload/frontend/revalidation.md) for cache configuration and manual invalidation. Verify shared-component updates on your project's cached routes as part of integration testing.

## Related

- [Component block](https://docs.systhema.app/ar/next/payload/blocks/component.md)
- [Pages](https://docs.systhema.app/ar/next/payload/content/pages.md)
- [Custom blocks](https://docs.systhema.app/ar/next/payload/custom-blocks.md)