check
Code copied to clipboard.
close
menu

Container

Containers are div blocks with maximum widths that auto-center themselves. They go inside Sections and should not be nested within each other.

Example Instance

<Container maxWidth="md">
  <Grid columns={2}>
  	{/* ...some children */}
  </Grid>
</Container>
content_copy
warning
Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method Instructions
LiftKit CLI
From any Next.js project, run the following command in your terminal.
npm run add container
content_copy
Github open_in_new View on Github

Props

Unique

Props unique to this component.

NameRequiredTypeDescriptionDefault Val
maxWidthnoLkContainerWidthSets the max width of the container"md"

Common

Props with globally-defined behavior that are used in multiple components.

Common PropsStatus
{children}Supported
Native HTML attributesSupported