Container

Responsive layout utility to control width of the main content area.

Import

import { Container } from "reshaped";
import type { ContainerProps } from "reshaped";

Storybook

Container stories

Usage

Container should be used as a wrapper for your main content. It provides the content with a max-width for larger screens and adds horizontal padding for mobile. You can use it to center page content horizontally or within other components, such as centering contents of the page header.

<Container>
  <View backgroundColor="neutral-faded" height={10} />
</Container>

Sizes

By default, Container takes the entire width of the parent. It supports the width property, which accepts any string value, allowing you to use px, %, or any other valid CSS measurement. If you pass a number value, Container will use the width value as an x1 unit multiplier.

<Container width="1024px">
  <View backgroundColor="neutral-faded" height={10} />
</Container>

You can also control its height and maxHeight with the same literal values.

<Container height="200px" maxHeight="50%" />

Composition

By default, Container has a horizontal padding of x4 units, but you can customize it using the padding property. For example, if you use Container to center content inside another component that already has its padding, you can completely remove it.

<ActionBar>
  <Container width="1024px" padding={0}>
    Your content
  </Container>
</ActionBar>

Container contents can be aligned vertically and horizontally using the align and justify properties, which match the flexbox styles.

<Container align="center" justify="center" />

Actionable

Dismissible