Spacing
Foundation
4px base grid. All spacing values are multiples of 4px. High-density UI — prefer compact patterns over spacious ones.
Gap scale
gap-0.52pxTightest spacing — icon + label, dot + text
gap-14pxBetween very close elements
gap-1.56pxPill button contents, nav item icon + label
gap-28pxBadge groups, small button groups
gap-312pxForm field spacing, toolbar items
gap-416pxSection spacing, card grid
gap-624pxBetween sections on a page
gap-832pxMajor section separation
Padding patterns
| Pattern | Classes | Used for |
|---|---|---|
| Compact table cell | py-2.5 px-3 | Table rows, dense lists |
| Toolbar / header | px-4 py-2.5 | Page header, panel header |
| Page section | px-6 py-5 | Component showcase sections |
| Page header | px-6 py-4 | Sticky top header bars |
| Card content | p-6 | shadcn CardContent default |
| Sidebar nav item | px-2.5 py-1.5 | Sidebar links |
| Compact button (sm) | h-7 px-3 | Toolbar buttons, inline actions |
| App shell outer gap | p-1.5 gap-1.5 | AppShell panel gaps |
Border radius
rounded4pxrounded-md6pxrounded-lg8pxrounded-xl12pxrounded-full999px| Class | When to use |
|---|---|
| rounded | Small elements — code spans, badges (inner) |
| rounded-md | Input, button, select |
| rounded-lg | Dropdown, table container, cards |
| rounded-xl | Panel, AppShell content areas |
| rounded-full | Pills, status dots, avatar |
On this page