Singleton Modal with Hook
A flow rendered in a shared singleton modal — one SequentOutlet at the top of the tree inside a provider. Any component below it opens a flow through a single useModal() hook, with no refs or outlet rendering of its own.
Click Open Setup Flow or Report a Bug below — they're unrelated flows sharing the same outlet.
The example also mixes both step-loader styles: a component loader for the first transition, and direct JSX for the last, which merges the final title into context to update the chrome.
Step changes play a sequential fade-slide transition via the ready-made slide({ fade: true }) factory from react-sequent/transitions — the outgoing step slides out to the left, then the incoming step slides in from the right.
Sequential Transition
The demo uses slide({ fade: true }) from react-sequent/transitions — its 24px distance and 300ms duration match the hand-rolled harness this demo used to carry. In sequential mode only one step is visible at a time: while previousStep is mounted the exit animation plays and its onAnimationEnd fires onExited; once the outgoing step unmounts, nextStep slides in. transitionKey is attached as a React key on each animation wrapper so back-to-back queued transitions remount them — otherwise the CSS animations never restart and onExited never fires again.
Outlet Reuse
Both Setup and Report a Bug are unrelated flows, yet share the same ModalProvider and single SequentOutlet. Flow state isn't tethered to either button's lifecycle — each openModal() call independently activates the outlet, runs to completion (or cancellation), and returns it to idle, ready for the next flow. No per-flow flags are managed by the provider; the library handles that internally.