# Spacing, radius and shadow

A 4px scale, radii derived from `--radius` and subtle shadows.

## Spacing

| Token | Value | Usage |
| --- | --- | --- |
| `space-1` | `4px` | gap-1. Icon + text inside badges. |
| `space-2` | `8px` | gap-2. Icon + text in buttons; toolbar items. |
| `space-3` | `12px` | gap-3 / px-3. Horizontal padding of Input and Select. |
| `space-4` | `16px` | p-4 / gap-4. Alert padding, gap between form fields. |
| `space-6` | `24px` | p-6 / gap-6. Card padding, space between card sections. |
| `space-8` | `32px` | gap-8. Between blocks on a page. |
| `space-12` | `48px` | py-12. Between large page sections. |

## Radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius` | `8px` | Base (--radius = 0.5rem). The other radii derive from it. |
| `radius-sm` | `4px` | rounded-sm. Checkbox, Badge, small items. |
| `radius-md` | `6px` | rounded-md. Button, Input, Select, Tabs, menu items. |
| `radius-lg` | `8px` | rounded-lg. Alert, Popover, Dialog. |
| `radius-xl` | `12px` | rounded-xl. Card. |
| `radius-full` | `9999px` | rounded-full. Switch, Avatar. |

## Shadow

| Token | Value | Usage |
| --- | --- | --- |
| `shadow-xs` | `0 1px 2px 0 #0000000d` | Input, outline Button, Select. |
| `shadow-sm` | `0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a` | Card. |
| `shadow-md` | `0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a` | Popover, DropdownMenu. |
| `shadow-lg` | `0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a` | Dialog, Sheet. |

---
PUI documentation · https://aline-aroucha.github.io/pui/spacing.html