Container

A wrapper component that sets a max-width and centers content horizontally.

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.

Prop

Type

Examples

Size

Containers can have multiple size.

1<Container size="none">
2  <Text>
3    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
4    Lorem Ipsum has been the industry's standard dummy text ever since the
5    1500s, when an unknown printer took a galley of type and scrambled it to
6    make a type specimen book.
7  </Text>
8</Container>

Align

Containers can be aligned to the left, center, or right of their parent element.

1<Container size="small" align="left">
2  <Text>
3    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
4    Lorem Ipsum has been the industry's standard dummy text ever since the
5    1500s, when an unknown printer took a galley of type and scrambled it to
6    make a type specimen book.
7  </Text>
8</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").