shadcn.io is not affiliated with official shadcn/ui
Usage Alerts Billing Block for Solid
Usage alert settings: percentage thresholds as switches with number inputs, recipients as email chips, and a choice between email and a webhook, with a save that checks them.
Installation
Overview
Let customers hear about usage before they run out, inside your app, with this usage alert settings section for Solid with Ark UI. A hairline frame with a plus mark on each corner holds three bands, each with its title and a line on the left and its controls on the right. Thresholds are three rows of a Switch in your foreground color and a Number Input for the percentage, with what that share is in checks beside it. Recipients are email chips in a Tags Input that checks every address. The channel is a Radio Group of two choice cards, email and webhook, with a Field for the webhook's address. The footer holds a status line and a "Save alerts" Button, the only colored control. Each band's top rule is drawn with Guides, with a plus where it meets the frame. For SaaS billing settings, monitoring and metered APIs.
FAQ
How do I load and save the settings?
The file starts with the plan's QUOTA (10 million checks a month here), the FIRST_THRESHOLDS (an id, whether it's on, and the percentage as typed), FIRST_RECIPIENTS and the two CHANNELS. Replace them with the account's saved alerts. The save handler checks the form and then shows a confirmation; it doesn't send anything, so post the thresholds, recipients, channel and webhook address to your API from there, and show your own error if the request fails.
What does Save check?
With email chosen it needs at least one recipient, and with webhook chosen it needs a full address that starts with https://. If either is missing it says so in the status line and moves focus to the field. Each percentage is held between 1 and 100 by its number input. The recipient chips take an address on Enter, on a comma, on blur or on paste, turn down addresses that aren't valid or are already listed with a line under the field, and stop at five.
What does the confirmation say?
A polite live region under the bands reads out what was saved: "Saved. We’ll alert 2 recipients by email at 50%, 80%, and 100% of 10M checks." It lists only the thresholds that are switched on, names the webhook when that channel is chosen, and says "Saved. Usage alerts are off." when none is on. Any change afterwards clears it.
What does a screen reader hear?
The section is headed by an h2 and each band by an h3. Each switch is named "Alert 1", "Alert 2" and "Alert 3", and each number input "Alert 1 threshold, percent of monthly checks". The chips' input is named "Alert recipients", and the radio group "Send alerts by", with each card's title and description read with its radio. The webhook field has a visible label and is disabled, not hidden, while email is chosen, so the layout never shifts.
Why are the switches and radios not in the primary color?
So the save button is the one colored control. The switches and the selected radio use your foreground color, and the chosen channel's card takes a neutral tint instead of the preset's primary one. If you want them in your accent, delete the NEUTRAL_SWITCH and NEUTRAL_RADIO classes and the CHOICE one.