Layout

Box

The lowest-level layout primitive: a styled `div` you can retag.

Server safeSource

Import

import { Box } from '@the_viveksingh/vivek-ui'

A div that behaves

Box adds no styling of its own. It exists so the contract - merged className, merged style, spread rest props, forwarded ref - is available on a plain element.

A Box is an unstyled div that merges className and style.

Your style wins: the library adds no specificity.

<Box className="panel">
  <Text>A Box is an unstyled div that merges className and style.</Text>
</Box>

<Box className="panel" style={{ borderStyle: 'dashed' }}>
  <Text tone="muted">Your style wins: the library adds no specificity.</Text>
</Box>

Change the element

as retags the element without changing anything else.

Rendered as a section, not a div.

<Box as="section" className="panel">
  <Text>Rendered as a section, not a div.</Text>
</Box>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Box
Prop	Type	Default	Description
`as`	`ElementType`	—	Render as a different element. Defaults to `div`.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Box carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.