Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Incident Response Dashboard Block for React

A live incident view: six incidents ranked P1 to P4 with time open, a vertical status stepper with an Advance button, three roles, an update composer and a timeline you can add to.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run an incident from one screen with this incident response panel for React with Base UI. A hairline frame with a plus mark on each corner holds six Mustercall incidents ranked P1 to P4 at the start, each showing how long it has been open against a typed clock of 14:20 UTC. The chosen incident shows its status as a vertical Steps (Investigating, Identified, Monitoring, Resolved) with the time each was reached, its three roles with Avatar initials, an update composer in a Textarea and a timeline, newest first. "Advance to Identified" is the one primary action: it moves the status and writes a timeline line. "Post update" adds the draft as a line. For on-call tools and status products.

FAQ

How do I use my own incidents?

Edit INCIDENTS: a title, a severity, the people in their roles, the typed timeline lines and reached, the ISO time each status was reached, whose first entry is when it opened. AS_OF is the clock every duration is measured against. The list, the header counts and the open times are worked out from them.

What does Advance do?

It moves the chosen incident one step along Investigating, Identified, Monitoring and Resolved, stamps the step with the page's clock, adds a line to the timeline and says so in the status line. At Resolved the button reads Resolved and does nothing more. Nobody is paged.

What does Post update do?

It adds your text to the top of the timeline as a line from the commander. An empty draft shows a problem instead. The text stays in the page and nothing is published to a status page.

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

The incidents, the roles and the clock are typed, and the steps, the timeline and the drafts live in page state. Send advance and post to your incident tool, take reached and lines from its record, and replace AS_OF with the current time.

How does it work from the keyboard?

Each incident is a button in a list, and the chosen one is marked current. The timeline is a named scroll region you can focus and scroll with the arrow keys. Choosing another incident does not move focus.

How does it look on a phone?

The incident list stacks above the chosen incident, whose status steps, roles, composer and timeline follow in that order, with the Advance button pinned to the foot.

All 200 dashboard blocks