Box
Apply token-based spacing and surfaces to a layout container.
Preview
Import
import { Box } from "@sigil-ui/components";Usage
<Box bg="surface" radius="md" p="var(--s-grid-cell)" borderColor="border">
<div className="font-[family-name:var(--s-font-mono)] text-sm text-[var(--s-text)]">
Token-backed container
</div>
</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.
Props
| 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 | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius- | Radius |
--s-shadow- | Shadow |
--s-surface | Surface background |
--s-border | Border color |