Container

A centered, max-width wrapper for page and section content.

Centered content

A Container caps its width, centers itself with auto margins, and keeps gutter padding on small screens.

import { Container, Box, Text } from "astralis-ui";

export function ContainerDemo() {
  return (
    <Box bg="subtle" w="full" py="6" rounded="xl">
      <Container maxW="md" bg="panel" py="5" rounded="lg" border="normal" borderColor="subtle">
        <Text size="sm" weight="semibold">Centered content</Text>
        <Text size="sm" color="muted">
          A Container caps its width, centers itself with auto margins, and
          keeps gutter padding on small screens.
        </Text>
      </Container>
    </Box>
  );
}

Import#

import { Container } from "astralis-ui";

Sizes#

maxW takes the sizing scale — pick per context: xs–sm for forms and prose, 5xl (the default) for typical pages, larger for dashboards.

maxW="xs"

maxW="md"

maxW="2xl"

import { Container, Text, VStack } from "astralis-ui";

const sizes = ["xs", "md", "2xl"] as const;

export function ContainerSizes() {
  return (
    <VStack gap="3" w="full" alignItems="stretch">
      {sizes.map((size) => (
        <Container key={size} maxW={size} bg="teal-subtle" py="3" rounded="lg">
          <Text size="xs">maxW=&quot;{size}&quot;</Text>
        </Container>
      ))}
    </VStack>
  );
}

Props#

Container extends Box; its three own props just set sensible page-wrapper defaults (w="full", auto inline margins).

Prop	Type	Default	Description
`maxW`	`"xs" – "8xl" \| any Box width token`	`"5xl"`	Width cap; the container centers itself with auto inline margins.
`px`	`"0.5" – "96" (spacing scale)`	`"4"`	Gutter padding so content never touches the viewport edge.
`centerContent`	`boolean`	`false`	Also stacks and centers the children themselves (flex column, centered).