shadcn.io is not affiliated with official shadcn/ui
Alert Rules Changelog Block for React
Six changed alert rules as cells on shared hairlines, each with a threshold track showing the old marker hollow and the new one solid, the figures in words, the channels it reaches and its severity, with a channel toggle that steps back the rules that never reach it.
Installation
Overview
An alert-rules changelog for React with Base UI, written for Alarmwick, a fictional alerting service. A start-aligned header carries the title, one sentence that says nothing is sent from the page, and a toggle group (All, Email, Pager, Chat) with a polite line that counts the rules reaching the chosen channel. Under it a band of six cells sits on shared hairlines, two columns from lg and one before. Each cell names the rule, says what it watches and draws a threshold track: a hollow marker where the threshold was, a solid one where it is now, the stretch between them filled, and the two figures in words ("500 ms to 350 ms") with Stricter or Looser. Under the track sit the rule's channels as outline chips with an icon and a word, and its severity as a glyph and a word (Critical, Warning, Info). Choosing a channel turns that channel's chips solid and steps back the rules that never reach it. It's built from Toggle Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For monitoring changelogs and on-call handbooks. The rules are example data and nothing is sent.
FAQ
How do I change the rules?
Edit RULES at the top of the file. A rule is an id, a name, what it watches, the was and now thresholds on a track from min to max, a unit, whether the new one is stricter, its severity and its channels. The marker positions and the figures in words are computed from those numbers, and the channel buttons come from CHANNELS.
How do I read the threshold track?
The hollow marker is where the threshold was and the solid one is where it is now; the filled stretch between them is the change. The track is decoration, hidden from assistive technology: the same facts are in the sentence beside it ("500 ms to 350 ms") with the word Stricter or Looser, so nothing relies on the drawing.
How are severity and channels shown without colour?
Severity is a glyph and a word (an octagon and Critical, a triangle and Warning, a circle and Info) and each channel is an outline chip with an icon and a word (Email, Pager, Chat). No status colour is used.
What does the channel picker do?
It is a single-choice toggle group with one button always pressed. A channel turns its chips solid and steps back, to a light solid tint, the rules that never reach it, so the cells never move. A polite line says how many rules reach the channel. The picker changes no data and nothing is sent: this is a changelog, not a console.
Related
- Pro
Event Stream Changelog
Deploys and rolloutsA split with a divider: a dark terminal window that plays a twelve-event log once, with the event type in words at the start of every line, and at the start the event types with their counts and a Replay button.
- Pro
Tabbed Rate Limit Changes Changelog
APIs and integrationsA tabbed window of rate-limit changes by plan: one tab per plan, a table of endpoints with the old limit struck through, the new one in bold, the change as an arrow, a word and a percentage, and a pair of bars.
- Pro
Segmented Bar Latency Budget
Metrics and chartsA single bar that slices a 250 ms request budget by hop (edge, auth, database, render), a switch between two releases that re-slices it, and a four-cell band with each hop's milliseconds and its change.
- Pro
Incident Severity Changelog
Incidents and uptimeAn incident log grouped under P0 to P4 headings, with a toggle group that filters it, a band of five median-time-to-resolve cells and rows of id, title, users affected and state, each severity a shape and a word.
- Pro
Error Rate Comparison Changelog
Incidents and uptimeFour error classes as rows, each a 14-day line split by a release marker with the average after it and the change as an arrow and a sign, plus a switch for one shared scale.
- Pro
On-Call Handoff Changelog
Incidents and uptimeA pager handoff note as a split: two responders and a band of three counts at the start, a checklist of what is still open at the end that the incoming person ticks, and a Shine Button that unlocks when every box is ticked.