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:

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.

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.

Nested

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

Empty Containers

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