Layout

Container

A responsive page-width wrapper for sections, shells and documentation layouts.

Component

21

Import

import { Container } from "@swirski/ui";

Playground

This component does not have editable controls yet.

Usage

<Container size="md">
  <Card>
    <CardContent>
      <Title order={2} size="h4">Contained section</Title>
      <Text tone="muted" weight="bold">
        Keep page content aligned without rewriting max-width classes.
      </Text>
    </CardContent>
  </Card>
</Container>

Props

5 generated

Prop	Type	Default	Notes
`asChild`	`boolean`	`false`	Renders the child as the root element.
`children`	`ReactNode`	`-`	Container content.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'fluid'`	`"lg"`	Applies the standard max-width.
`tone`	`'default'`	`"default"`	Reserved tone hook for Swirski data attributes.
`variant`	`'default' \| 'fluid'`	`"default"`	Uses a constrained or full-width layout.
`...divProps`	`HTMLAttributes<HTMLDivElement>`	`-`	Forwarded to the rendered container.

Previous: AppShell Next: Grid