React Runbook Checklist

A written SOP that nobody records following is just paper. This turns a procedure into an auditable record: each step signed off in order, stamped with who did it and when, so afterward you can prove the sequence was actually run.

Reactor startup procedure SOP-114

J. Okafor (Shift A)

0/6

  1. 1.Verify line is isolated and locked out

    Confirm LOTO tags on breakers B-12 and B-14.

  2. 2.Purge reactor with nitrogen

    Hold ≥ 5 min, O₂ below 2%.

  3. 3.Confirm coolant flow ≥ 15 L/minCaution
  4. 4.Open feed valve FV-201 to 25%
  5. 5.Start agitator at 40 rpm and ramp to 120 rpm
  6. 6.Record initial batch parameters in log

    Temperature, pressure, and lot number.

Installation

npx shadcn@latest add "https://kelvinui.com/registry/runbook-checklist.json"

Props

PropTypeDescription
titlestringProcedure name
stepsRunbookStep[]{ id, text, note?, caution? } in order
operatorstringName recorded against each sign-off
sequentialbooleanEnforce top-to-bottom order (default true)
formatTime(t: number) => stringTimestamp formatter
onComplete() => voidFired once when the last step is signed off

Order, attribution, and undo

The behaviours that make this a record rather than a to-do list:

  • Sequential by default. A step is locked until every step above it is signed off, because a startup procedure done out of order is a hazard, not a checklist. Set sequential={false} for genuinely independent tasks.
  • Attribution and time on every sign-off. Completing a step stamps it with the operator and a timestamp — the audit trail a post-incident review needs.
  • Un-checking cascades. Reverting a step in sequential mode also reverts everything after it, because the state below it can no longer be trusted once an upstream step is reopened.

caution flags a step that carries risk so it stands out in the flow. onComplete fires exactly once when the procedure finishes — hook it to log the completed runbook, notify the next shift, or unlock the downstream action.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.