Skip to main content


Wherever you need to have a repeating set of bricks inside your brick, you can use the <Repeater> component.
In it's simplest form it is just <Repeater propName="...">. You can have infinite nesting levels using Repeaters inside of repeated bricks. You can also have more than one type of brick repeated in a Repeater.

See Nested blocks.


For usage with Next /App Router, please read the React Server Components Guide.


interface RepeaterProps {
propName: string
itemProps?: types.Props
renderWrapper?: (items: React.ReactElement) => React.ReactElement
renderItemWrapper?: (
item: React.ReactElement,
index?: number,
itemsCount?: number
) => React.ReactElement

Properties definition

propNameName of the prop containing the repeated items (should match the one in the repeaterItems schema property)
itemProps?Optional object with props passed to all the items (for example a global configuration that is the same for all the items).
renderWrapper?Optional function taking items as an argument. It should return JSX that wraps the items. Rendered only if there is at least one repeated item.
renderItemWrapper?Optional wrapper around each item. Has item, index and itemsCount as arguments and should return JSX

Usage example

renderWrapper={(items) => (
<div className="flex justify-center items-center">{items}</div>