@ds-kit/container

Container component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@ds-kit/container
Minified + gzip package size for @ds-kit/container in KB

Readme


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

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.