When you want your custom component to accept other blocks, configure your component with children. The following video demonstrates a custom tabs component that accepts Builder blocks as content. Each tab receives a unique block that the user drags and drops in.
To get the most out of this tutorial, you should have the following:
- An app you've integrated with Builder
- Familiarity with using custom components in Builder
For more details on child-related options when working with child components, visit the canHaveChildren, childRequirements, and defaultChildren sections of the registerComponent() documentation.
When adding children, Builder's Gen 1 SDKs use withChildren()
, while the Gen 2 SDKs require <Blocks>
. For more information on the SDKs, visit SDK Comparision.
The following video demonstrates adding children to custom components using a basic hero banner:
To customize your components even further, leverage Builder's Input Types.
For more examples of custom components with multiple sets of children, visit: