Box

The basic surface to put content on. It is the plainest sheet in the library: it groups content and lifts it off the page background.

import { Box } from 'neba';

<Box>Content</Box>;

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
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="fade"). Wrap it in an Animate* component for a trigger or a replay

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

When structure is needed (a title, a footer, dividers), use Card, which is a Box with those sections laid out on it.

Examples

variant

None of the three weights flood the sheet with colour, because what a Box holds is content that arrives with colours of its own. What separates solid from outline is the sheet's opacity and whether it carries a border. See Colour for the whole rule.

text has no surface, so elevation is ignored.

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

color

The surface is white, so color reaches the border 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>
  );
}

size

On a Box, size sets neither a height nor a type scale but the size of the sheet: its radius and its padding. A Box is as tall as what it holds, and its children bring their own typography.

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

padded and render

padded={false} is for full-bleed content: an image, a table, a list that draws its own rows. render renders the Box as an element other than a <div>.

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