Components · Screens

ProcessingProcessScreen

A process screen with real status and real content

npx shadcn@latest add @umbra/process-screen

The status comes first, the real content goes below. The step comes only from a real source (current). No illustrations, no fake progress, no percentages. The end is explicit: “Done” with a checkmark in --primary-ink and actions. On failure: the Giants mark, what happened, and actions

When to use

  • Processing after a recording: “Stopping recording” → “Finishing lines” → “Saving meeting” → “Done”, with the growing transcript below
  • File import, saving, model download (real megabytes as facts)

When not to use

  • First-screen demo: Showcase
  • An action shorter than a second: Spinner in the button
  • A notification over the screen: NoticeCard

step 1 of 3

Stopping the recording

32 min · 94 words · 2 lines

Anna. Let’s lock it in: the beta ships on Friday

Oleg. I’ll have the landing page copy by Thursday

Do

  • Show real content: the latest lines without hallucinations, real numbers in facts (Counter works)
  • Open the result as soon as it’s ready: an explicit action, not a wait

Don’t

  • An illustration instead of content, made-up percentages, steps on a timer
  • Auto-continue sooner than 3 s or while the person is already doing something