Component showcase

Last updated: June 18, 2026

Component showcase

Pick a path to walk through yourself. Tour exercises every component; Essentials shows just the basics.

Tour every component

Time Elapsed Component

Calculators

Display Variables

Showcase

Variables

1
The time elapsed is —
2
The result of the first formula is — mL/min and the second is — mL/min/1.73m²

Continue

BotBubble without a label — the default conversational style.

Component showcase

BotBubble with a kicker label above the text. Use it for branded intros or to anchor a step.

Continue to guidance variants

GuidanceCard has three severity variants.

Stable — low severity

Green left border. Reassuring or routine clinical guidance.

Unstable — caution

Amber left border. Use when the situation warrants extra attention.

Alert — high severity

Red background with icon. Stop and act.

Continue to notes

NoteBox supports three label modes.

NOTEDefault label is 'NOTE' in caps.

ReferenceCustom label — e.g. 'Reference' for citation-style notes.

label={false} hides the label entirely. Use for inline reminders inside a stepper or data viz.

Continue to stepper

Stepper wraps a numbered task list with a step-tag header. Optionally embeds a NoteBox section.

Step 1 of 2

Plain stepper

1
First step item rendered via Steps
2
Second item — list dividers come from the Steps component
3
Third item

Step 2 of 2

With embedded note

1
Step item one
2
Step item two

When the step has a `note`, FlowRunner adds a flush NoteBox section so it sits inside the same Stepper card.

Continue to media

FileCard for downloads, YouTubePlayer for video.

Reconstitution instructions#

Fibryga Reconstitution with Nextarohttps://www.youtube.com/watch?v=6Hl4fbCforE

Continue to product cards

ProductCard renders standalone. Each brand has its own color token from `lib/products`.

Continue to data viz · conditions

DataVisualization wraps three body variants. First — Conditions (IF/THEN rows). Branded treatments open a ProductPopover on click.

Treatment Recommendations

TEG 5000

Thromboelastometry

6 Conditions

IFTHEN

ACT > 150 s after protamine
Protamine
10–50 mg prn
FIBTEM A10 < 7 mm or fibrinogen < 1.5 g/L
Fibryga
4 g · re-dose as needed
EXTEM CT > 80 s with normal FIBTEM
Octaplex
1500 IU (<60 kg) · 2000 IU (>80 kg) · re-dose once
Platelet count < 50 × 10⁹/L
Platelets
1 pool
EXTEM ML > 15% within 60 min
Antifibrinolytic
Aminocaproic or Tranexamic · max 50–100 mg/kg
Hb < 80 g/L with ongoing bleeding
RBC
1 unit at a time · clinical reassessment

ACT > 150 s after protamine

THEN

Protamine

10–50 mg prn

FIBTEM A10 < 7 mm or fibrinogen < 1.5 g/L

THEN

Fibryga

4 g · re-dose as needed

EXTEM CT > 80 s with normal FIBTEM

THEN

Octaplex

1500 IU (<60 kg) · 2000 IU (>80 kg) · re-dose once

Platelet count < 50 × 10⁹/L

THEN

Platelets

1 pool

EXTEM ML > 15% within 60 min

THEN

Antifibrinolytic

Aminocaproic or Tranexamic · max 50–100 mg/kg

Hb < 80 g/L with ongoing bleeding

THEN

RBC

1 unit at a time · clinical reassessment

Algorithm based on FARES-II, FIBRES study, and Toronto General Hospital's validated cardiac surgery protocol.

Continue to data viz · packs

Packs — auto-fit grid of cards. Supports an embedded NoteBox below the packs.

Empiric MHP Transfusion

Full plasma inventory · administer while awaiting labs

3 packs

Pack 1
- 4 RBC units
- May issue before patient arrival
Pack 2
- 4 RBC units
- 4 plasma units
Subsequent
- 4 RBC units
- 2 plasma units

If CPB duration ≥ 150 min — measure ROTEM / TEG / INR

Continue to data viz · facts

Facts — label/value pairs. Good for product spec sheets.

Treatment Recommendations

Fibryga

Human Fibrinogen Concentrate

Fibrinogen

CLASS: Human Fibrinogen Concentrate
CONTAINS: Coagulation Factor I (Fibrinogen) · Human albumin
ROUTE: Intravenous injection or infusion
TARGET: Fibrinogen replacement to ≥1.5 g/L
INDICATION: Congenital & acquired fibrinogen deficiency with bleeding

Algorithm based on FARES-II, FIBRES study, and Toronto General Hospital's validated cardiac surgery protocol.

Continue to choice list

Choice list — full-width secondary buttons with a chevron, the default option style. Used when the chat needs a stacked list of choices (e.g. picking which assay is available). An optional badge tags the choice.

ROTEM

Tour complete

Every FlowMessage kind and option style has rendered at least once.

Hit Reset to run the tour again.

Just the essentials

The minimum useful flow: a bot question and a yes/no answer.

GuidanceCard · stable variant

Subtle green left border. Use for low-severity guidance.

Yes

Essentials path complete

FinalResponse with description + footer.

Use Reset to walk it again, or pick Tour next time.