Layout

Container

Centres content and caps its width, with a responsive gutter.

Server safeSource

Import

import { Container } from '@the_viveksingh/vivek-ui'

Centre a column of content

Centred, max-width capped, with responsive side padding.

<Container>
  <Text>Centred, max-width capped, with responsive side padding.</Text>
</Container>

Widths

Five widths, from sm to full. Pair with Section, which accepts the same sizes.

size="sm"

size="md"

size="lg"

<Container size="sm">Narrow, good for prose</Container>
<Container size="md">The default</Container>
<Container size="lg">Wide, good for dashboards</Container>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Container
Prop	Type	Default	Description
`as`	`ElementType`	—	—
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	—	Max content width. Defaults to `lg` (64rem).
`flush`	`boolean`	—	Remove the horizontal gutter.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Container carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.