Container

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

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 />

Usage

How wide the container may grow, and where it sits once it stops growing.

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>

Custom render

Container renders a div by default. Use the render prop to render a semantic element such as main, section, or article.

1<Container size="medium" render={<main />}>
2  <Text>Page content</Text>
3</Container>

API Reference

Renders a centered content wrapper with max-width constraints.

Prop

Type

Slots

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

SlotElement
containerThe container <div> (or the element supplied via render)

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, and Container stays a generic <div> to avoid emitting unlabeled regions that clutter assistive-tech output.
  • Pass role explicitly to override (e.g. role="main").
  • With render, Container applies no automatic role. The rendered element keeps its implicit role, so render={<main />} stays a main landmark.