Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Escalation Alerts Comments Block for Ark UI

A three-rung escalation ladder and a Pretend it's control that walks five unanswered comments up it, showing who has been notified, with Acknowledge to stop a comment climbing.

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

Make silence visible, with this escalation alerts comment block for React with Ark UI. A compact header names the queue and holds a Pretend it's Segment Group (Now, +20 min, +3 h, +9 h), because the page never reads a clock. The frame opens with the ladder as three rungs, each with its rule and who it tells (After 30 minutes: channel lead, After 2 hours: on-call manager, After 8 hours: director) and a count of how many comments sit there. Under it five unanswered comments list how long each has waited, whether the 30 minute response target was breached (Breached 1 h 41 min ago, or Within target, 12 min to go) and which people have been notified, as Badges. Acknowledge freezes one comment where it is, and the one primary Shine Button acknowledges every breached one. It is built from Segment Group, Shine Button, Button, Badge, Avatar and Guides, with CSS only. For support desks, on-call rotations and any queue with a response promise.

FAQ

How do I change the rules and the queue?

Edit LADDER (each rung has after minutes, a label, a role and a person), TARGET for the response promise and COMMENTS with ISO posted times. Waits, rungs reached and the breach wording are all worked out from the posted times, a fixed AS_OF moment and the pretended offset in PRETENDS.

Why a Pretend it's control instead of a live clock?

So the demo shows the same thing every time and can be tested: a page that read the clock would escalate a little differently on every visit. In a real app you would compute the wait from the server's time, re-evaluate on a schedule and page people from the server.

What does Acknowledge do exactly?

It freezes the comment at the wait it had when you pressed it. Moving the pretend time later does not climb it any further, and its line reads Acknowledged after the time it had waited. Pressing it again takes the acknowledgement back and the comment climbs again.

What stays local?

Everything: nobody is paged, nothing is sent, and the acknowledgements live in the page. To make it real, record who acknowledged and when on the server, stop the escalation job for that comment there, and send the notifications from the escalation job rather than from the page.

Is it accessible?

The ladder and the queue are lists, the notified people are a named list per comment, and breach is written in words, never colour alone. Acknowledge is a toggle button that reports whether it is pressed, and each change of the pretend time or acknowledgement is announced in the polite status line.

How does it look on a phone?

The three rungs stack, the Pretend it's control sits under the sentence, and each row keeps its words, its Acknowledge button and its notified people in a single column.