Components · Structure
TileTile
The unit of a bento screen: when to use a tile, when a nested one
npx shadcn@latest add @umbra/tileThe unit of a screen. A screen is made of tiles on the window background, with air between tiles gap-tile (8), not lines. Surface color and spacing define the boundaries
When to use
- A meaningful block on the window: meeting list, summaries, settings, case card
variant="nested": a surface inside a tile (field, chip group, preview). Radius 16 is concentric with the 24 tile at an 8 gaptone: a colored role tile when the color means something:primary(main action, selection),indigo-soft(AI summaries, text),giants-soft(warning, text),indigoandgiants(saturated: only an icon or mark, no text)interactive: the whole tile is a link or button
When not to use
- Above content (menu, notice, dock): glass,
GlassorNoticeCard - List rows:
ListRowwithout a nested card - A tile inside a tile just for a border: nested surfaces only as
variant="nested", not a second tile
Summary
Launch moves to Tuesday. Anya wraps up the mockups, Timur writes the copy
Recordings this month
Speech not recognized
The “Call with contractor” recording has no text. Check the microphone
Do
- One tile, one job. Tile padding is the same across the whole product:
p-tile(20) - Role text on
indigo-softandgiants-soft, and only an icon on the saturatedindigoandgiants
Don’t
- More than two colored tiles on a screen (Indigo inside a showcase doesn’t count)
- Borders, shadows, gradients on a tile
- Muted text (
text-muted, opacity) on a colored tile - Any text on the saturated
indigoandgiants - Custom tile padding (
p-6,p-4instead ofp-tile)