Container

Horizontal breathing room around whatever it wraps. Nothing to do with the grid — its one job is to keep a page's content off the edge of the window.

import { Container } from 'neba';

<Container>Content</Container>;

It is often used next to Grid, but the two are separate. A Container holds a grid as happily as it holds a single paragraph, and a GridContainer is complete without one. The questions are separate: how far the content sits from the edge of the window, and how the content divides itself up.

It draws no surface for the same reason. The outermost element on a page is the one thing that must not decide what the page looks like. Put a Box or a Card inside when a sheet is wanted.

Props

Prop	Type	Default	Description
maxWidth	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none'	'none'	How wide the content may get, on the breakpoint ladder — xs 30rem, sm 40rem, md 48rem, lg 64rem, xl 80rem. 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.

Examples

Measure

The default is none — a gutter and no width limit. A Container's job is the gutter, and a measure is a second decision that a page should have to ask for.

Given a value, it uses the same ladder the breakpoints use. lg is 64rem, the same number a lg: utility changes at. That is why it is not Tailwind's named max-w-* scale: two ladders called lg on one page is how a layout drifts by a few pixels for no reason anybody can find later.

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>
  );
}

No gutter, no centring, another element

The three switches are independent. padded={false} keeps the centring and the measure and drops only the padding; centered={false} does the opposite. render is Base UI's render prop, 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>
  );
}

With a grid

The usual pairing. The gutter and the measure outside, the columns inside — and 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>

Coming from Material UI

MUI	Neba
maxWidth="lg"	The same, except the default is 'none' rather than 'lg'
disableGutters	padded={false} — the name the whole library uses
fixed	Not offered. Use maxWidth
sx={{ px: 3 }}	size / density. Padding is a step on a ladder, not an arbitrary number