Overview

Container constrains content to a readable width. It renders a div with a size-based max-width (small, medium, large, or the default none, which adds no limit) and an align prop that positions it within its parent (default center). Use it as the outer wrapper for pages, articles, and settings forms; lay out the content inside it with Flex or Grid.

Anatomy

Import and assemble the component:

1import { Container } from '@raystack/apsara'
2
3<Container />

API Reference

Renders a centered content wrapper with max-width constraints.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Examples

Size

The size prop caps the container's max-width. The default is none, which lets content span the full width of the parent.

1<Container size="none">
2  <Text>
3    Workspace settings control how members join, what they can access, and how
4    billing works. Changes apply to everyone in your organization as soon as you
5    save them.
6  </Text>
7</Container>

Align

The align prop positions the container within its parent — left, center, or right. Default is center.

1<Container size="small" align="left">
2  <Text>
3    Workspace settings control how members join, what they can access, and how
4    billing works. Changes apply to everyone in your organization as soon as you
5    save them.
6  </Text>
7</Container>

Accessibility

The Container component is designed with accessibility in mind:

• Applies role="region" automatically when an aria-label or aria-labelledby is provided, exposing the container as a landmark.
• Without a label, no role is applied — Container stays a generic <div> to avoid emitting unlabeled regions that clutter assistive-tech output.
• Pass role explicitly to override (e.g. role="main").