Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification Rules CRUD Block for Solid

An uptime tool's alert rules written as sentences: a popover that makes a rule from an event and a threshold, rows that open to a window and a recipients tags input, a pause switch per rule, a Paused-only toggle and Delete with Undo.

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

Decide who hears about what, with these notification rules for Solid with Ark UI. A hairline frame with a plus mark on each corner puts a search and a Paused-only Toggle over a list of rules in a frame of fixed height. Each rule is a sentence worked out from its fields, such as "Error rate above 2% for 10 minutes, tell Oncall team and 1 more", with a Switch to pause it and a Delete. New rule, the only Shine Button, opens a Popover for an event and a threshold, checked against that event's range, and the new rule opens in place. A rule opens as a Collapsible to its threshold, a window of 5, 10 or 30 minutes and its recipients in a Tags Input; the last recipient can't be removed and a duplicate is named. The foot says what changed and offers an Undo after a delete. The bands are ruled by Guides, and an Empty state shows when the search finds nothing. For monitoring, uptime, billing and any alert with a line and an audience.

FAQ

How do I fill it with my rules?

Edit KINDS for the events (a label, "above" or "below", a unit and the allowed range) and START_LINES for the rules (event, threshold, minutes, paused and the recipients joined by semicolons). The sentence, the counts and the short name that labels each control are built from those fields.

What does the block refuse?

A threshold outside its event's range, and a rule that repeats another's event, threshold and window. A recipient that is empty, longer than 24 characters or already in the list is refused with a reason, and so is removing the last one or adding a sixth. The reasons appear under the field and in the foot.

What does pausing do?

The Switch flips a rule to Paused: its sentence is struck through, its line says "Paused, nobody is told", and it still counts in the list. The Paused-only toggle shows just those rules and its number is how many there are.

What does Undo bring back?

A deleted rule, in its old place with its recipients, and focus goes to it. Edits to a threshold, a window or the recipients apply as you make them and are not part of Undo.

What stays local, and how do I wire a real save?

Rules live in state in this tab and a reload restores the five; nothing is sent. In your app call your API from create, pause, setThresholdOf, setSpan, setRecipients and remove, resolve the recipients to real contacts, and run the range check on the server too.

How does it look on a phone?

The search takes the full row with the toggle and the count under it. Each rule keeps its switch and delete button on one line with the sentence wrapping between them, and an open rule stacks its threshold over its window with the recipients below.