Container
Preview appears after the next Storybook update.
<Container />When to use
Use it for
- The outer wrapper of a page or a page section.
- sm for forms and reading (keeps lines under about 75 characters), lg for settings, xl for dashboards and tables.
- render={<main />} on the page's main region.
Not for
- Inside cards or dialogs: they already set their width and padding.
- Full-bleed backgrounds: put the background on an outer element and the Container inside it.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Match the width to the content
Forms in an xl container stretch inputs to unreadable lengths. Pick sm.
Nested containers
A container inside a container doubles the padding and adds nothing.
Accessibility
- A plain div by default; render as <main /> for the main region so the landmark exists.
- Content reflows at 320px wide without horizontal scroll (WCAG 1.4.10).
Content guidelines
- Not applicable: Container holds no copy of its own.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Container/Container.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Size sm (640)
.sm - Size md (720)
.md - Size lg (960)
.lg - Size xl (1200)
.xl - padding-sm
.padding-sm - padding-md
.padding-md - padding-lg
.padding-lg - padding-md
@media (max-width: 640px) .padding-md, .padding-lg
Motion and interaction
Container does not animate: it only lays out other components.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Container/Container.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'xl' | Max width: sm 640 (forms, reading), md 720, lg 960 (settings), xl 1200 (dashboards, tables), full. Default `xl`. |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Horizontal padding from the space scale: none, sm (16), md (24), lg (32). Default `md`. |
render | ReactElement | none | Render another element, for example `<main />`. |
Playground
Change the props and see the real Container update. Controls are generated from the TypeScript props; nothing here changes the system.
<Container size="sm" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Container in Storybook).
Embed Storybook stories here (2)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters)
v1.0.0, Nov 11, 2026