Box

A sheet of acrylic with content on it. The plainest surface in the library: it groups things, and that is all it does.

import { Box } from 'neba';

<Box>Content</Box>;

Anything structural — a title, a footer, dividers — belongs to Card, which is a Box with those sections laid out on it.

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface. The sheet is never dyed — solid and outline differ in opacity and hairline
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Corner radius and padding. Never a height, never the type scale
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The surface is white, so it reaches the hairline only — invisible on solid, which has no border
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. Ignored when variant is text
padded	boolean	true	Inner padding. Turn it off for full-bleed content — an image, a table
render	useRender.RenderProp	—	Renders something other than a div. Base UI's own escape hatch
children	ReactNode	—	What the box holds

Every native <div> attribute passes through, color excepted.

Examples

Variants

solid does not flood the surface with colour, for the same reason TextField doesn't. What a box holds is other people's content, and it arrives with its own colours: body text, links, buttons, fields. On an accent fill every one of them would need an on-fill treatment, which is the opposite of what a container is for.

The sheet is not dyed at all. What separates solid from outline is not colour but how much light the sheet holds — its opacity — and whether it carries a hairline. See Colour for the whole rule.

import { Box } from 'neba';

export default function BoxVariants() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
      <Box variant="solid">solid</Box>
      <Box variant="outline">outline</Box>
      <Box variant="text">text</Box>
    </div>
  );
}

text has no surface, so elevation is ignored rather than drawing a shadow around an invisible rectangle.

Colours

The surface is white, so the family reaches the hairline only. That is why the example below is outline: on a solid Box, which has no border, color makes no visible difference.

import { Box } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function BoxColors() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-2 gap-3 sm:grid-cols-3">
      {COLORS.map((color) => (
        <Box key={color} color={color} variant="outline">
          {color}
        </Box>
      ))}
    </div>
  );
}

Sizes

Unlike every other component, size on a Box sets neither a height nor a type scale. A box is as tall as what it holds, and its children bring their own typography — a container that reset the type scale would render the same paragraph at two sizes depending on what it was wrapped in. So here size means the size of the sheet: its radius and its padding.

import { Box } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function BoxSizes() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-start gap-3">
        {SIZES.map((size) => (
          <Box key={size} size={size}>
            size {size}
          </Box>
        ))}
      </div>
      <div className="flex flex-wrap items-start gap-3">
        {SIZES.map((size) => (
          <Box key={size} size={size} density="compact">
            compact {size}
          </Box>
        ))}
      </div>
    </div>
  );
}

Elevation

import { Box } from 'neba';

export default function BoxElevation() {
  return (
    <div className="flex flex-wrap items-start gap-5">
      {([0, 1, 2, 3] as const).map((elevation) => (
        <Box key={elevation} variant="solid" elevation={elevation}>
          elevation {elevation}
        </Box>
      ))}
    </div>
  );
}

Unpadded, and as another element

padded={false} is for full-bleed content — an image, a table, a list that draws its own rows. render is Base UI's own escape hatch, so a box can be any element.

import { Box } from 'neba';

export default function BoxUnpadded() {
  return (
    <Box padded={false} render={<section />} className="w-full max-w-md overflow-hidden">
      <div className="h-20 bg-[var(--neba-primary-soft-press)]" />
      <div className="p-4 text-[0.8125rem]">
        The strip above touches all four edges, because the box is not padded.
      </div>
    </Box>
  );
}