Component Library

State Flow

A component for displaying a state flow

Default

Default state flow

Current State: idle

IdleReady

LoadingProcessing...

SuccessComplete!

ErrorFailed

idle → loading → success

loading → error (on failure)

tsx

1import { StateFlow } from "@/components/ui/state-flow"
2
3export default function Example() {
4  return <StateFlow />
5}

Async State Journey

Simulated API and processing states for visual debugging of async UI transitions.

Async State Journey Playground

Replace generic spinners with a visible lifecycle debugger for async UI work.

Current State: idle

Simulated OutcomeAuto reset after completion

IdleReady to submit

LoadingCreating account...

SuccessUser created

ErrorValidation failed

Timeline

Choose a scenario and run a simulation.

Scenario: Form Submission

Runs: 0

Last duration: N/A

tsx

1import { StateFlowAsyncPlayground } from "@/components/state-flow-demo";
2
3export default function Example() {
4  return <StateFlowAsyncPlayground />
5}

Props

Name	Type	Default	Description
state	string	idle	The current state of the flow
label	string	Idle	The label of the current state
description	string	Ready	The description of the current state
active	boolean	false	Whether the current state is active
direction	string	horizontal	The direction of the flow
isActive	boolean	false	Whether the current state is active
intent	string	primary	The intent of the flow