BankaiContainer

A width utility: centered at a themeable max-width by default, edge-to-edge with fluid. Reusable anywhere — a Card, a section, a hero — not once per route. The width layer of App › Layout › Page › Container; it is not a landmark and never renders its own <main>.

Example

default — centered at max-width

centered

fluid — fills the available width

fluid

Responsive by available space, not the viewport

The centered width is intrinsic: max-inline-size resolves against the containing block, and margin-inline: auto centers within it. So a container caps at its max-width when there is room (bars on the sides) and collapses to edge-to-edge on its own when its parent is narrower — with no media queries. This is deliberate: it stays correct inside an embedded or split-screen pane, where the viewport is wide but the container's box is only a fraction of it — the case a viewport breakpoint gets wrong. fluid is for the opposite intent: fill the width even when there is room for bars (full-bleed heroes, dashboards). A full-bleed hero over a centered body is just two containers at different widths.

Props

Prop	Type	Default	Description
`as`	`HTML tag name`	`'div'`	Element to render as. Polymorphic — any non-void HTML tag name.
`fluid`	`boolean`	`false`	Fill the available width (edge-to-edge) instead of the centered max-width default. This is the "bars left/right on huge viewports" toggle — fluid removes the max-width cap so the container spans its parent, keeping only the inline gutter. Centered content already collapses to edge-to-edge on its own when the parent is narrower than the max-width; fluid opts out of the cap even when there is room for bars (full-bleed heroes, dashboards).

Emits

This component emits no events.

Slots

Slot	Description
`default`	Container children — the content whose width is constrained.

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

Token	Default	Purpose
`--bankai-container-max-width`	`80rem`	Centered content cap (ignored when fluid).
`--bankai-container-gutter`	`var(--bankai-space-8, 1rem)`	Inline padding so content never touches the edge.