@bento/container

Container

Container is the atomic building block for polymorphic rendering + slot composition + prop spreading. It provides the infrastructure that makes Bento components infinitely customizable while maintaining consistency.

Installation

npm install --save @bento/container

Props

The @bento/container package exports the Container component:

<Source language='tsx' code={ BasicExample } />

The following properties are available to be used on the Container component:

Prop	Type	Required	Description
children	ReactNode	No	The content to render inside the container.
slot	string	No	A named part of a component that can be customized. This is implemented by the consuming component.
The exposed slot names of a component are available in the components documentation.
slots	Record<string, object | Function>	No	An object that contains the customizations for the slots.
The main way you interact with the slot system as a consumer.
as	ElementType<any, keyof IntrinsicElements>	No
ref	any	No

Examples

As

Setting the as prop allows you to change the HTML tag of the Container component. By default, Container renders as a div element.

<Source language='tsx' code={ AsExample } />

Building Block

Container is designed to be the foundation for building other components. This example shows a custom Box component built on top of Container with padding and elevation props.

<Source language='tsx' code={ BuildingBlockExample } />

Nested

Container components can be nested to create semantic HTML structures with proper document outline.

<Source language='tsx' code={ NestedExample } />

Empty Containers

Container renders even without children, making it ideal for presentational elements like backdrops, spacers, or decorative elements that rely solely on styling.

<Source language='tsx' code={ EmptyExample } />