Container
The page-level wrapper for content. It is a div with mx-auto, w-full,
a max-width read from the --container-width-* token for its size and
padding-inline from --container-padding, so a design system resets the
scale once on :root (or on a subtree) and every page follows.
import Container from '@zuilib/components/container'
Sizes
sm to 2xl map to --container-width-sm (40rem) through
--container-width-2xl (96rem). full removes the cap and keeps the gutter.
Loading example
As a landmark
as renders another tag and types its props; use it to get the right
landmark instead of nesting a div inside main.
Loading example
Retheming the scale
The steps are plain custom properties, so a subtree can narrow or widen them without touching the component.
Loading example
Props
ContainerProps<TTag> adds the props of the rendered tag to:
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'lg' | Reads --container-width-<size>; full is max-w-none |
as | ElementType | 'div' | Tag or component to render; its props are typed |
className | string | — | Merged last, after the width and padding classes |
children | ReactNode | — |
Slots
| Slot | Element | Notes |
|---|---|---|
[data-slot="container"] | div (or as) | Root. Also data-size |
Tokens
| Token | Default | Used for |
|---|---|---|
--container-width-sm | 40rem | size="sm" |
--container-width-md | 48rem | size="md" |
--container-width-lg | 64rem | size="lg" |
--container-width-xl | 80rem | size="xl" |
--container-width-2xl | 96rem | size="2xl" |
--container-padding | calc(var(--spacing) * 4) | Horizontal gutter |
Accessibility
- Purely presentational: no roles or ARIA of its own.
- Use
as="main","section","article"or"nav"to give the column a landmark; asectionneeds an accessible name (aria-labeloraria-labelledby) to be exposed as a region.