Components · Recording

Recording dockDock

The recording status capsule above the content

npx shadcn@latest add @umbra/dock

The product’s main action that takes time: recording. States come from the real source: the app passes the timer and signal levels, the component doesn’t make them up. White marks --record-foreground on red --record (Lc 77). At rest the icon is 32

When to use

  • Recording in ShadeNotes; another single long-running product action
  • The product sets the position: usually absolute inset-x-0 bottom-6 inside the window, plus the dock prop on Page

When not to use

  • A regular action on the page: Button
  • A message next to the dock: NoticeCard

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

Don’t

  • Fake bars or a timer not driven by the recording
  • A second living element nearby: one living creature per screen
  • A destructive “Stop” button: it uses the recording red