Container

Container fills its available inline size up to maxInlineSize and centres itself. Pass a container.* preset for a fixed maximum in rem. Its numeric suffix is the maximum in CSS pixels at a 16px root. The maximum scales with the root font size. For other widths, set the maximum on a Box style, such as style={{ maxInlineSize: '80ch' }}. Pass marginInline to change the centring. Read Layout to choose a layout component.

Responsive descendants

A traditional container usually only constrains and centres content. Luke UI's Container also establishes a local responsive query boundary.

Luke UI responsive values inside the Container resolve against its content box rather than the document root. A container.672 Container therefore never reaches bp768. paddingInline reduces the content-box width, so it can also change where responsive styles switch.

Use Container when descendants should respond to the available content area rather than the document root.

Choose the rendered element

Container uses Box's elementType and renderRoot contract.

API