Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Uptime Incident Alert Notification Block for Vue

An outage notice with the facts of the incident in a quiet column (status, duration, start, regions as chips), an ordered list of updates in a frame, and a Subscribe to updates with Email and Push checkboxes that answers in the demo.

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

Tell people what is down and how to hear when it is fixed, with this uptime alert for Vue with Ark UI. It is Pingmoor, an uptime monitor, in two columns. At the start, outside the frame, the facts of the incident: a Status dot with "Down", how long it has lasted (worked out from the page's fixed now), when it began and the regions it hits as Badge chips. In the hairline frame at the end an ordered list of updates, Detected, Investigating and Identified, newest first, and under it Subscribe to updates, the one Shine Button, with an Email and a Push Checkbox. Subscribing answers "You'll hear about the next update (demo)" and offers an Undo. Guides draw the frame. For status pages, monitors and any notice that asks to be followed.

FAQ

How do I show my own incident?

Edit UPDATES (a time, a title and a sentence each, newest first), REGIONS, DETECTED and AS_OF. How long it has lasted is worked out from those two times, so it reads "12 minutes" for everyone. In your app pass the incident your monitor reports and keep the status line for the latest update.

What does Subscribe do, and what stays local?

Only this page changes: it shows the receipt "You'll hear about the next update by Email and Push (demo)" and nothing is sent or stored. With no channel ticked the button stays in place and the status line asks you to pick one. Undo puts the form back, and a reload clears it. In your app post the channels from subscribe and confirm the address before you say so.

Is red the only sign that it is down?

No. The status is the word Down beside the dot, the duration is written out and the latest update is in heavier type, so the state does not rely on colour. The dot is the only use of the status colour in the block.

How does it look on a phone?

The facts come first, then the framed list of updates and the subscribe band, stacked. The form and its receipt share one cell, so the frame never changes height when you subscribe.

Is it accessible?

The updates are an ordered list with machine-readable times, the channels are a fieldset with a legend, each checkbox has its own name, and Subscribe stays focusable when it cannot run and says why. A single polite status line speaks each result.

All 100 notification blocks