---
title: "Block catalog"
description: "Every built-in block, the editor tiers that offer it and how to register blocks."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/payload/blocks
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/llms.txt
---
> This page isn't translated yet. Showing English.


Built-in blocks define the Payload fields editors fill in and the converters that turn stored Lexical nodes into frontend components. The tables below show default placement; block toggles and module options can remove entries.

![The Stack item picker with block thumbnails](./images/block-picker.light.webp)

## Blocks by tier

Which tier offers a block by default. A tier is the kind of rich-text editor a field uses; see [Editor tiers](https://docs.systhema.app/ar/payload/editor/tiers.md).

| Block                                |   `root`   |  `region`  | `fragment` |  `slot`  |
| :----------------------------------- | :--------: | :--------: | :--------: | :------: |
| [Section](https://docs.systhema.app/ar/payload/blocks/section.md)              |     ✅     |     ❌     |     ❌     |    ❌    |
| [Columns](https://docs.systhema.app/ar/payload/blocks/columns.md)              |     ✅     |     ⚠️     |     ❌     |    ❌    |
| [Stack and Nested Stack](https://docs.systhema.app/ar/payload/blocks/stack.md) |     ✅     |     ✅     |     ✅     |    ❌    |
| [Feature](https://docs.systhema.app/ar/payload/blocks/feature.md)              |     ✅     |     ❌     |     ❌     |    ❌    |
| [Gallery](https://docs.systhema.app/ar/payload/blocks/gallery.md)              |     ✅     |     ❌     |     ❌     |    ❌    |
| [Carousel](https://docs.systhema.app/ar/payload/blocks/carousel.md)            |     ✅     |     ✅     |     ❌     |    ❌    |
| [Rich Text](https://docs.systhema.app/ar/payload/blocks/rich-text.md)          | Stack item | Stack item | Stack item |    ❌    |
| [Accordion](https://docs.systhema.app/ar/payload/blocks/accordion.md)          |     ✅     |     ✅     |     ❌     |    ❌    |
| [Card](https://docs.systhema.app/ar/payload/blocks/card.md)                    |     ✅     |     ⚠️     |     ❌     |    ❌    |
| [Quote](https://docs.systhema.app/ar/payload/blocks/quote.md)                  |     ✅     |     ✅     |     ✅     |    ❌    |
| [Form](https://docs.systhema.app/ar/payload/blocks/form.md) ‡                  |     ✅     |     ✅     |     ✅     |    ❌    |
| [Posts](https://docs.systhema.app/ar/payload/blocks/posts.md) †                |     ✅     |     ❌     |     ❌     |    ❌    |
| [Component](https://docs.systhema.app/ar/payload/blocks/component.md)          |     ✅     |     ❌     |     ❌     |    ❌    |
| [Image](https://docs.systhema.app/ar/payload/blocks/image.md)                  |     ✅     |     ✅     |     ✅     |    ❌    |
| [Video](https://docs.systhema.app/ar/payload/blocks/video.md)                  |     ✅     |     ✅     |     ✅     |    ❌    |
| [YouTube](https://docs.systhema.app/ar/payload/blocks/youtube.md)              |     ✅     |     ✅     |     ✅     |    ❌    |
| [Embed](https://docs.systhema.app/ar/payload/blocks/embed.md)                  |     ✅     |     ✅     |     ✅     |    ❌    |
| [Google Maps](https://docs.systhema.app/ar/payload/blocks/google-maps.md)      |     ✅     |     ✅     |     ✅     |    ❌    |
| [Hero blocks](https://docs.systhema.app/ar/payload/blocks/hero.md)             |  register  |  register  |  register  | register |
| [Button](https://docs.systhema.app/ar/payload/blocks/button.md)                |     ✅     |     ✅     |     ✅     |    ✅    |
| [Chip](https://docs.systhema.app/ar/payload/blocks/chip.md)                    |     ✅     |     ✅     |     ✅     |    ✅    |
| [Icon](https://docs.systhema.app/ar/payload/blocks/icon.md)                    |     ✅     |     ✅     |     ✅     |    ✅    |
| [Avatar](https://docs.systhema.app/ar/payload/blocks/avatar.md)                |     ✅     |     ✅     |     ✅     |    ✅    |

⚠️ = needs the `withColumns` / `withCard` / `withGallery` option of `regionLexicalEditor`. † = only with the Posts module. ‡ = only with the Forms module. "register" = offered by no editor until you add it through `customBlocks`.

## Layout blocks

`SectionBlock`, `ColumnsBlock`, `StackBlock`, `NestedStackBlock`, `FeatureBlock`, `GalleryBlock`, `CarouselBlock`.

## Content blocks

`RichTextBlock`, `AccordionBlock`, `QuoteBlock`, `CardBlock`, `EmbedBlock`, `GoogleMapsBlock`.

With the Posts module on, `PostsBlock` joins them; see [Posts block](https://docs.systhema.app/ar/payload/blocks/posts.md).

## Media blocks

`ImageBlock`, `VideoBlock`, `YoutubeBlock`, plus `EmbedBlock` and `GoogleMapsBlock`.

## Inline blocks

`ButtonBlock`, `ButtonBlockFields` (reusable field array), `ChipBlock`, `IconBlock`, `AvatarBlock`.

## Hero blocks

`HeroSimpleBlock`, `HeroBackgroundBlock` and `HeroFeatureBlock` are offered by no editor until you register them; see [Hero blocks](https://docs.systhema.app/ar/payload/blocks/hero.md).

## Registering blocks

Register a project block with a Payload definition, a converter and an explicit editor tier. `editor` accepts one tier or an array; omitting it offers the block in every tier, including `slot`. `type: 'inline'` places it within text; `type: 'block'` places it between paragraphs.

```tsx title="src/payload/blocks/ProjectQuote.tsx"
import type { CustomBlockConverter } from '@systhemaui/payload'
import { QuoteBlock } from '@systhemaui/payload/blocks'
import { Quote } from '@systhemaui/next'

export const ProjectQuoteBlock = { ...QuoteBlock, slug: 'projectQuote', interfaceName: 'ProjectQuote' }

export const projectQuoteConverter: CustomBlockConverter = ({ node, nodesToJSX }) => {
  const fields = node.fields as { content?: { root?: { children?: unknown[] } } }
  const children = fields.content?.root?.children
  return <Quote.blockquote>{children ? nodesToJSX({ nodes: children }) : null}</Quote.blockquote>
}
```

```ts title="src/payload.config.ts"
import { withSysthema } from '@systhemaui/payload'
import { ProjectQuoteBlock, projectQuoteConverter } from './payload/blocks/ProjectQuote'

const config = withSysthema(payloadConfig, {
  customBlocks: [
    {
      type: 'block',
      data: ProjectQuoteBlock,
      editor: ['root', 'region', 'fragment'],
      converter: projectQuoteConverter,
    },
  ],
})
```

`payloadConfig` is your project's existing Payload configuration. Import block definitions from `@systhemaui/payload/blocks`; copy the definition before changing fields or its slug. Do not mutate the shared export.

### Overriding a converter

Custom converters merge after the built-in converter map. Registering a converter with a definition whose slug is `quote` replaces the `quote` renderer, while a distinct slug such as `projectQuote` adds a separate block. The map is split into block and inline-block converters, so keep `type` consistent with the built-in block. Nested text must go through `nodesToJSX` to retain headings, links and inline blocks. Relationship-based blocks require populated documents, not IDs.

A custom converter used in client-mode live preview must also be registered through `livePreview.clientSetup`; see [Client mode](https://docs.systhema.app/ar/payload/frontend/live-preview/client-mode.md). Adding a field changes the schema, so regenerate your Payload types and use your project's migration process before deployment.

For full examples, see [Custom blocks](https://docs.systhema.app/ar/payload/custom-blocks.md). Every block also carries an icon and a picker thumbnail; see [Block images](https://docs.systhema.app/ar/payload/editor/field-patterns.md#block-images-editor-preview).