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

This is a small container with max-width of 430px. It's perfect for focused content like forms, login screens, or narrow text columns.

This is a medium container with max-width of 715px. It works well for blog posts, articles, or content that needs more breathing room while still maintaining readability.

This is a large container with max-width of 1145px. Use it for full-width layouts, dashboards, or when you need to display multiple columns of content while ensuring the line length stays comfortable for reading.

Installation

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

import { Container } from '@raystack/apsara/v1'

<Container size="small">Small container content</Container>

<Container size="medium">Medium container content</Container>

<Container size="large">
  Large container content
</Container>

API Reference

Props

The Container component accepts the following props:

size: "small" | "medium" | "large" | "none" - Controls the max-width of the container (default: "none")
- small: 430px
- medium: 715px
- large: 1145px
- none: no max-width
align: "left" | "center" | "right" - Controls the horizontal alignment of the container (default: "center")
className: string - Additional CSS class names
aria-label: string - Accessible label for the container region
aria-labelledby: string - ID of element that labels this container region

Alignment

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

Accessibility

The Container component is designed with accessibility in mind:

Uses role="region" to mark it as a landmark for screen readers
Supports labeling via aria-label or aria-labelledby
Helps organize content into meaningful sections