Components · Screens
ShowcaseShowcase
Shows the product at work during onboarding
npx shadcn@latest add @umbra/showcaseA product demo on the intro step: what happens when the person presses the main button. useDemoScenes plays scenes in turn, the final frame holds for 1.7 s (1.5–2 s), then the cover fades and the demo replays without a hard reset. Looping is allowed only here: nowhere else in the interface do clips loop
When to use
- The first step of
Onboarding: “Record → capsule → lines → summary” - A stylized, scaled-down depiction of a system window (permission request), never one that looks real
When not to use
- A process screen with real status (processing, import, upload):
ProcessScreen, which shows real content, not an illustration - Progress and percentages
- Animation for looks outside the first screen
Don’t
- A demo in place of real status
- A drawn system window that looks real
- A second living element next to it