Container

Puts horizontal gutters around a page's content and centres it. Keeping content off the edge of the window is its only job.

import { Container } from 'neba';

<Container>Content</Container>;

Props

Prop	Type	Default	Description
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	How wide the content may get. A step of the measure ladder (xs 30rem, sm 40rem, md 48rem, lg 64rem, xl 80rem) or a length of your own(60ch, min(90vw, 72rem), a number for pixels) and it may change at a breakpoint: { xs: "none", lg: "xl" }. The default, none, is no limit
padded	boolean	true	The gutter. Turning it off keeps the centring and the measure and drops only the padding
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The padding's scale. As on Box it never touches a height or the type scale, and it is not the gutter: that is spacing
densityshared	'default' | 'compact'	'default'	Padding only
centered	boolean	true	Centres the content once maxWidth is narrower than the page. No effect while maxWidth is none: there is nothing left over to centre in
render	useRender.RenderProp	—	Renders something other than a div (<main />). Base UI's own escape hatch
children	ReactNode	—	What the gutter goes around

Every native <div> attribute passes through.

It draws no surface, so there is no variant, color or elevation. Put a Box or a Card inside when a sheet is wanted.

It is often used with Grid, but the two are separate: a Container decides how far the content sits from the edge of the window, a GridContainer how the content divides itself up.

Examples

maxWidth

The default is none: gutters with no width limit.

Given a value it takes a step of the measure ladder: xs 30rem, sm 40rem, md 48rem, lg 64rem, xl 80rem. The four upper steps are the breakpoint floors, so maxWidth="lg" holds the content to exactly the width at which a lg: variant starts. xs is the one that is not, because a measure of zero is not a thing.

import { Box, Container } from 'neba';

const WIDTHS = ['xs', 'sm', 'md', 'none'] as const;

export default function ContainerMaxWidth() {
  return (
    <div className="flex w-full flex-col gap-3">
      {WIDTHS.map((maxWidth) => (
        <div
          key={maxWidth}
          className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]"
        >
          <Container maxWidth={maxWidth} size="sm">
            <Box size="sm" className="text-center">
              maxWidth {maxWidth}
            </Box>
          </Container>
        </div>
      ))}
    </div>
  );
}

A length of your own

Anything that is not a step of the ladder is passed to max-width untouched, so a measure the ladder does not have needs no escape hatch. A number is pixels.

<Container maxWidth="60ch">…</Container>
<Container maxWidth="min(90vw, 72rem)">…</Container>
<Container maxWidth={640}>…</Container>

Changing at a breakpoint

maxWidth takes a per-breakpoint map, and every entry applies from its own breakpoint up, so two of them describe a whole page. Header and Footer take the same prop in the same shape, which is how a bar and the content under it stay on one edge.

import { Box, Container } from 'neba';

export default function ContainerResponsive() {
  return (
    <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
      {/* Full width on a phone, held at 48rem from md, at 64rem from lg.
          Resize the window and the sheet stops growing twice. */}
      <Container maxWidth={{ xs: 'none', md: 'md', lg: 'lg' }} size="sm">
        <Box size="sm" className="text-center">
          none · md 48rem · lg 64rem
        </Box>
      </Container>
    </div>
  );
}

padded · centered · render

The three are independent. padded={false} keeps the centring and the width limit and drops only the gutters; centered={false} does the opposite. render changes the element, so a Container can be a page's real <main>.

import { Box, Container } from 'neba';

export default function ContainerPlain() {
  return (
    <div className="flex w-full flex-col gap-3">
      {/* No gutter, but still centred and still measured. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container maxWidth="sm" padded={false}>
          <Box size="sm" className="text-center">
            padded={'{false}'}
          </Box>
        </Container>
      </div>

      {/* Measured, but held against the start edge instead of centred. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container maxWidth="sm" centered={false} size="sm">
          <Box size="sm" className="text-center">
            centered={'{false}'}
          </Box>
        </Container>
      </div>

      {/* Any element you like — a page's real `<main>`. */}
      <div className="w-full rounded-(--neba-radius-sm) bg-[var(--neba-primary-soft-press)]">
        <Container render={<main />} size="sm">
          <Box size="sm" className="text-center">
            render={'{<main />}'}
          </Box>
        </Container>
      </div>
    </div>
  );
}

size and density

These set how wide the gutters are. It uses Box's steps, and touches neither a height nor the type scale.

With a grid

The gutters and the width limit outside, the columns inside. The inner grid is padded={false}, because it already sits in something that pads.

<Container maxWidth="lg">
  <GridContainer spacing={3} padded={false}>
    <Grid span={{ xs: 12, md: 8 }}>Body</Grid>
    <Grid span={{ xs: 12, md: 4 }}>Sidebar</Grid>
  </GridContainer>
</Container>