Container

The Container component constrains the maximum width of page content and provides consistent horizontal alignment across your layout.

It is part of the Layout family of components, alongside Box, Flex, Grid, and Section.

Import

import { Container } from "@libdev-ui/base";

Demo

Centered Container

This container has max-width defined by size=2.

Usage

import { Container } from "@libdev-ui/base";

export default function Example() {
  return (
    <Container size="2" align="center" p={4} style={{ background: "lightgray"}}>
      <h2>Centered Container</h2>
      <p>This container has max-width defined by `size=2`.</p>
    </Container>
  );
}

Props

Prop	Type	Default	Description
as	React.ElementType	"div"	Polymorphic element/component type.
size	Responsive<"1" | "2" | "3" | "4">	"4"	Max-width size preset.
align	Responsive<"left" | "center" | "right">	"center"	Horizontal alignment (via auto margins).
asChild	boolean	false	Renders child element directly without wrapper.
children	React.ReactNode	—	Content of the container.

Sizes

Size	CSS Variable	Width
1	--ld-container-1	448px
2	--ld-container-2	688px
3	--ld-container-3	880px
4	--ld-container-4	1136px

Examples

All sizes

<>
  <Container size="1" style={{ background: "lightblue", marginBottom: 12 }}>
    size=1 (max-width: 448px)
  </Container>
  <Container size="2" style={{ background: "lightgreen", marginBottom: 12 }}>
    size=2 (max-width: 688px)
  </Container>
  <Container size="3" style={{ background: "lightpink", marginBottom: 12 }}>
    size=3 (max-width: 880px)
  </Container>
  <Container size="4" style={{ background: "lightyellow" }}>
    size=4 (max-width: 1136px)
  </Container>
</>

Alignment

<>
  <Container size="2" align="left" style={{ background: "lightgray", marginBottom: 12 }}>
    Align left
  </Container>
  <Container size="2" align="center" style={{ background: "lightgray", marginBottom: 12 }}>
    Align center
  </Container>
  <Container size="2" align="right" style={{ background: "lightgray" }}>
    Align right
  </Container>
</>