ABBA UIv0.1.0
Layout

Box

The lowest-level layout primitive.

Server-renderable1 export

A styled element with token-bound spacing, surface, radius and elevation. Reach for Box when you need a container that respects the design system without inventing a new component for it.

Import

import { Box } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/box.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Surfaces and spacing

Every visual property maps to a token, never a raw value.

Content on a subtle surface

<Box padding={5} background="subtle" radius="lg" bordered>
  Content on a subtle surface
</Box>

Props

Box props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
as"div" | "span" | "section" | "article" | …"div"Element to render. A closed union rather than open polymorphism, which keeps prop errors readable.
paddingSpaceTokenPadding on both axes, from the 4px spacing scale.
paddingInlineSpaceTokenHorizontal padding. Overrides padding on that axis only.
paddingBlockSpaceTokenVertical padding. Overrides padding on that axis only.
background"none" | "default" | "subtle" | "raised" | "muted"Background surface role.
radius"none" | "sm" | "md" | "lg" | "xl" | "full"Corner radius token.
shadow"none" | "xs" | "sm" | "md" | "lg" | "xl"Elevation token.
borderedbooleanfalseDraws a one-pixel border using the current border token.

Accessibility

  • Box renders a plain element and adds no ARIA of its own.
  • Choose a meaningful element with `as` — `section`, `article`, `nav` — rather than leaving everything a div.