Container
Markdown for agentsCentered, width-constrained page container with shared gutters and four width presets.
npx @slipstream-ui/cli@latest add containerShared page width
Centered content
The same max-width and gutters on every page keep headers and sections aligned.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| width | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Maximum content width. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Horizontal gutters. |
| as | 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'div' | Semantic element to render. |
Accessibility
- Use the as prop for landmarks and add an accessible name when the container is a named region.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.