Components · Structure

PagePage

The screen column: header, scrolling and room for the dock

npx shadcn@latest add @umbra/page

The main screen column: a tile with scrolling content inside. The header is sticky; while the page is at the top it’s flat, on scroll it turns into glass (.glass) and its bottom edge fades out with a --edge-fade strip (28 px), no line. The 4 px scrollbar shows only while moving and hides 0.7 s after it stops

When to use

  • A section screen: “Meetings”, “Settings”, a case feed
  • dock: the screen has a Dock and the content reaches it

When not to use

  • A step screen (onboarding, processing): a tile up to 600 px centered in the window, no scrolling, fits in 1100 × 700
  • A block inside a screen: Tile
  • Dialog and menu: glass on top (Glass)

Meetings

7 recordings this week

Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Do

  • One page per screen, with a Sidebar next to it
  • Header actions only as round 56 buttons and SearchToggle

Don’t

  • A line or shadow under the header: the edge fades out on its own
  • A second scroll area inside the page
  • Dock space when the content doesn’t reach the dock