Container

A layout component with gutter and padding management for responsive content centering.

Powered by

Installation


pnpm dlx pitsi@latest add container

Usage

Command Context Menu

On This Page

Installation Usage Components Container EscapeContainer SpaceLeft SpaceRight Props Container EscapeContainer SpaceLeft / SpaceRight

import { Container } from "@/components/ui/container"

<Container>
  <h1>Page Content</h1>
  <p>
    Your content here will be automatically centered with responsive gutters.
  </p>
</Container>

Components

The Container component exports several utilities:

Container

The main container component with responsive gutters and centered content.

<Container>
  <div>Centered content with gutters</div>
</Container>

EscapeContainer

Break out of the container to span the full viewport width.

<Container>
  <div>Normal content</div>
  <EscapeContainer>
    <div>Full-width content</div>
  </EscapeContainer>
</Container>

SpaceLeft

Add left spacing that matches the container's gutter.

<SpaceLeft>
  <div>Content with left spacing</div>
</SpaceLeft>

SpaceRight

Add right spacing that matches the container's gutter.

<SpaceRight>
  <div>Content with right spacing</div>
</SpaceRight>

Props

Container

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to be contained
`gutterWidthClassName`	`string`	`"[--gutter-width:10svw]"`	Custom gutter width CSS variable
`paddingMobileClassName`	`string`	`"[--padding-mobile:1rem]"`	Custom mobile padding CSS variable
`className`	`string`	-	Additional classes for the wrapper
`classNames`	`object`	-	Classes for specific container parts
`classNames.wrapper`	`string`	-	Classes for the outer wrapper
`classNames.grid`	`string`	-	Classes for the grid container
`classNames.leftBar`	`string`	-	Classes for the left gutter
`classNames.rightBar`	`string`	-	Classes for the right gutter
`classNames.content`	`string`	-	Classes for the content area

EscapeContainer

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to span full width
`className`	`string`	-	Additional classes

SpaceLeft / SpaceRight

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The content to add spacing to
`className`	`string`	-	Additional classes
`gutterWidthClassName`	`string`	`"[--gutter-width:10svw]"`	Custom gutter width CSS variable
`paddingMobileClassName`	`string`	`"[--padding-mobile:1rem]"`	Custom mobile padding CSS variable

Container Component

This content is automatically centered with responsive max-width and padding.

import { Container } from "@/components/ui/container"

export function ContainerDemo() {
  return (
    <div className="w-full">
      <Container className="py-8">
        <div className="bg-card border-border text-card-foreground space-y-4 rounded-lg border p-8 shadow-sm">
          <h2 className="text-2xl font-bold">Container Component</h2>
          <p className="text-muted-foreground">
            This content is automatically centered with responsive max-width and
            padding.
          </p>
          <div className="border-border bg-muted/50 mt-4 flex items-center gap-2 rounded-md border p-4">
            <div className="bg-muted size-10 rounded-full" />
            <div className="flex-1">
              <div className="bg-muted mb-2 h-3 w-3/4 rounded" />
              <div className="bg-muted/70 h-2 w-1/2 rounded" />
            </div>
          </div>
        </div>
      </Container>
    </div>
  )
}