title: "Container" slug: "/packages/container" category: "layout" componentNames:

• "Container"

Container

The Container component can be used to wrap content or control elements in containers with a predefined max-width.

To see the various container sizes in action, check out the home pattern.

import Container from "@ds-kit/container"

Basic Example

The Container component comes in four sizes (xs, sm, md, lg). Use the size prop to choose a container size.

<>
  <Container size="xs">xs container</Container>
  <Container size="sm">sm container</Container>
  <Container size="md">md container</Container>
  <Container size="lg">lg container</Container>
</>

Theming

Container sizes can be specified at the theme level using the containers option. If there are no container sizes specified in the theme, the container component defaults to the default sizes:

const containers = {
  xs: "48rem",
  sm: "63rem",
  md: "84rem",
  lg: "90rem",
}

Props

The container component uses styled-system under the hood, so you can use all the props from styled-system [margins and paddings].(https://jxnblk.com/styled-system/#margin--padding).