Container component


3.1.02 years ago3 years agoMinified + gzip package size for @ds-kit/container in KB


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

  • "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>


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",


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).

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.