shadcn.io is not affiliated with official shadcn/ui
Warning States Stepper Block for Ark UI
A drone pre-flight list in three tiers told by shape and word, where cautions are accepted, a blocker needs a clearance reference, and Launch stays locked until all are resolved.
Installation
Overview
Sort problems by how serious they are with this tiered warning stepper for React with Ark UI. A plus-marked frame holds a panel at the start and a vertical Steps rail at the end for a drone pilot's five pre-flight checks (Battery, Airspace, Weather, Payload and Launch). Each check has a tier told by a shape and a word, never a colour: Info is a circle, Caution a triangle and Blocker an octagon. A caution is resolved by ticking "I accept this caution"; a blocker cannot be accepted and is resolved only by a clearance reference of four characters or more. Checks open in any order, and Launch stays locked, with "Launch blocked by Airspace", until the rest are resolved. "Next check" and "Launch drone" are the block's one Shine Button.
FAQ
How do I add a check or change its tier?
Add an entry to CHECKS with a tier of info, caution or blocker, a detail and its facts. resolvedOf decides what resolves each tier, and the rail, the panel and the Launch lock all read it.
Why can a blocker not be accepted?
Because accepting would hide a real stop. A blocker needs something from outside, a clearance reference here, and the check says "Needs clearance" until it has one. Replace the length test in resolvedOf with a call to your own service.
Why can I not open Launch?
It is locked while any other check is open. Pressing it, or the button on the last step, keeps you where you are and the status line names the first thing in the way, blockers first.
What stays local?
Acceptances and the reference are component state; nothing is sent to anyone and nothing launches. The last panel says "Launch cleared in this demo".