Import

import { Box } from "@sigil-ui/components";

Preview

<Box>Box content</Box>

Box is a low-level escape hatch for semantic HTML and token-backed surfaces. Prefer higher-level Sigil layout primitives for pages:

<SigilPage rhythm="locked" chrome="rails">
  <SigilSection space="normal">...</SigilSection>
</SigilPage>

Use Box when you need an element polymorphic container (as="aside", as="article") but still want to reference Sigil tokens.

Prop	Type	Default	Description
`as`	`ElementType`	—	—
`bg`	`string`	—	Token name like `surface` or full CSS value
`borderColor`	`string`	—	Token name like `border` or full CSS value
`radius`	`string`	—	Radius key like `md`, or full CSS value
`shadow`	`string`	—	Shadow key like `sm`, or full CSS value
`p`	`number	string`	—
`px`	`number	string`	—
`py`	`number	string`	—
`m`	`number	string`	—
`mx`	`number	string`	—
`my`	`number	string`	—