Flow Examples

Combine three curated journeys with every released transition and three supported styling presets. The configuration gallery is available everywhere. Its interactive launcher is enabled only in local development, where it loads the checksum-pinned v1.56.3 runtime and uses the local feedback route. Deployed documentation never loads the preview runtime or enables submission.

Use these examples to explore combinations, then return to Flow Design for implementation guidance or the Flow Reference for exact configuration shapes.

Curated flow gallery

Compose a released flow

Pick a useful journey, every released transition choice, and an app-matching preset. In local development, the launcher uses the public registerFlow(config) and open(options)path from the pinned v1.56.3 runtime.

Interactive preview available locally

1. Choose a flow

Six fields · three screens · conditional evidenceIncident triageCollect a structured report, reveal diagnostics for blocking incidents, and offer local screenshot capture.Compact signal · answer branchingCustomer pulsePair a numeric signal with an optional follow-up, in a small app-matched modal.Two-column form · context branchRelease readinessA dense operational check that adapts when the host application marks a release as risky.

2. Choose screen motion

ImmediateSlide HorizontalSlide VerticalFadeScale FadeCustom lift

Forward and Back use the selected direction-aware motion. System reduced-motion preference always replaces it immediately.

3. Match the host application

Product darkCool accent, comfortable rhythm, and a wide two-column product surface.dark · comfortable · wideEditorial lightWarm accent and a focused compact layout for a content-led application.light · comfortable · compactCompact consoleDense spacing and a green signal color for an operational dashboard.dark · compact · default

Presets use only appearance, presentation, and field spans. Host CSS styles these preview cards, not BugDrop's Shadow DOM.

Ready to preview

Incident triage

Welcome → report → conditional diagnostics → screenshot

Slide Horizontal · Product dark · 2 columns

Local preview only

Interactive previews are available in local development.

Runtime v1.56.3 · commit 47a392d1e7b1 · configuration preview