Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Runbook Status Dashboard Block for React Aria

Nine runbooks behind a select, each with its owner, trigger, automation level and last run, five steps that Run executes until a manual one asks you to tick it, and a failing step that offers Retry.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run an operational procedure one step at a time, with this runbook panel for React with React Aria. A Native Select in the header picks one of nine runbooks, each option naming how its last run went. The frame shows who owns the runbook, what triggers it, how automated it is (worked out from its steps: Automated, Semi-automated or Manual) and when it last ran, then its five Steps, each marked Automated or Manual with its typed duration. The Shine Button runs the automated steps one after another, stops at a manual step and asks you to tick a Checkbox that it is done, then carries on and ends with how long the run took. One runbook has a step that fails the first time: the run stops with the reason, and the same button becomes Retry step. It's built from Native Select, Steps, Checkbox, Badge, Button, Shine Button and Guides. For ops consoles and incident tooling.

FAQ

How do I fill it with my runbooks?

Edit RUNBOOKS. A runbook has an owner, a trigger, a last-run state and date, and five steps, each Automated (a title and its seconds) or Manual (a title, its seconds and the sentence beside the box). The automation level and the total duration are worked out from the steps. A step with a fail message fails the first time it runs, to show the stop and the retry.

What happens when I press Run?

Each automated step takes a short beat and is marked Done, one after another. At a manual step the run waits: the box and a "Confirm and go on" button appear in the band under the steps, and focus moves to the box. Ticking it and confirming carries on. While a run is going, Run and the select are held, and Run answers "Still running" if you press it.

What does the failing step show?

The run stops on the step and marks it Failed. The band under the steps states the reason as an alert, the foot says which step failed, and the button reads Retry step. Retrying runs that step again, and this time it passes. Run again starts a fresh run from the first step, and the step fails once more.

What stays local, and how do I wire it for real?

All of it: no step executes anything and the times are typed. To make it real, call your automation for each automated step and move the run on from its result, keep the manual confirmation as a record of who ticked it and when, and read the last-run state from your history.

Is it accessible?

The steps are a named list whose items say where each stands in words. The foot is the one polite status region: it announces the step that is running, that a step needs you or has failed, and when the run is complete. The box is a real checkbox with the sentence as its label, and the button that is busy stays focusable and answers instead of going dead.

How does it look on a phone?

The four facts wrap to two columns, the steps stay a single column, and the foot with Run is pinned to the bottom of the screen.