Generic polymorphic container with shorthand style props for spacing, color, radius, and shadow.

Import

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

Preview

<Box bg="surface" p={16} radius="md" shadow="sm">
  Content inside a styled box
</Box>

<Box as="section" bg="primary-muted" py={24} px={16}>
  Renders as a section element
</Box>

<Box borderColor="border" p={12} m={8} radius="lg">
  Bordered box with margin
</Box>

Prop	Type	Default	Description
`as`	`ElementType`	`"div"`	HTML element or component to render as
`bg`	`string`	—	Background — token name (e.g. `"surface"`) or raw CSS value
`borderColor`	`string`	—	Border color — token name or raw CSS value
`radius`	`string`	—	Border radius — token scale key (e.g. `"md"`) or raw CSS value
`shadow`	`string`	—	Box shadow — token scale key (e.g. `"sm"`) or raw CSS value
`p`	`number \| string`	—	Padding (number = px)
`px`	`number \| string`	—	Horizontal padding
`py`	`number \| string`	—	Vertical padding
`m`	`number \| string`	—	Margin (number = px)
`mx`	`number \| string`	—	Horizontal margin
`my`	`number \| string`	—	Vertical margin
`className`	`string`	—	Additional CSS classes