Layout
Box
Generic <div> wrapper with token-driven padding and radius shortcuts. The unstyled foundation.
Examples
Padding + radius
pad=2 r=sm
pad=4 r=md
pad=6 r=lg
<Box pad={2} radius="sm">…</Box>
<Box pad={4} radius="md">…</Box>
<Box pad={6} radius="lg">…</Box>Accented
accented
<Box pad={3} radius="xl" style="background:var(--uin-mat-selected);">accented</Box>Props
| Prop | Type | Default | Description |
|---|---|---|---|
pad | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | — | Padding token (--uin-s-N). |
radius | 'sm' | 'md' | 'lg' | 'xl' | — | Border-radius token (--uin-r-X). |
...rest | HTMLAttributes<HTMLDivElement> | — | Spread onto the underlying <div>. |
Install
CLI
npx @a3tai/mittsu add box