Container

Containers are the most basic layout element in Nature UI. It is used to constrain the maximum of the content it wraps.

This component uses tailwindcss max-w-* utility classes to set the max width of a component.

Import#

import { Container } from "@nature-ui/core";

Usage#

To contain any piece of content, wrap it in the Container component.

<Container>
  There are many benefits to a joint design and development system. Not only
  does it bring benefits to the design team, but it also brings benefits to
  engineering teams. It makes sure that our experiences have a consistent look
  and feel, not just in our design specs, but in production
</Container>

With size#

The size prop accepts one of xs, sm, md, lg, xl or any valid css width property value.

<Container size="sm" centered>
  There are many benefits to a joint design and development system. Not only
  does it bring benefits to the design team...
</Container>

Props#

Name	Type	Default	Description
centerContent	`boolean`	-	If `true`, container will center its children regardless of their width.
size	`string`	`xs`, `sm`, `md`, `lg`, `xl`, `string`	Can be one of the above or a valid css width property value like `500px`