shadcn.io is not affiliated with official shadcn/ui
Usage Anomaly Alert Billing Block for Svelte
A spend page with 14 daily columns over a usual-range band, today far above it, and a side sheet shown open that ranks what drove the spike and offers to cap compute at $5 a day or mark it expected.
Installation
Overview
Explain a sudden bill before it becomes a surprise, with this usage anomaly alert for Svelte with Ark UI. It opens from the Spend page of Cloudtern, a cloud-cost watcher: the header's sentence says today's spend is $13.80, 4.3 times the usual $3.20, and its outline Investigate Button opens the sheet. Under a soft scrim, inside a hairline frame with a plus mark on each corner, the page is drawn with 14 daily spend columns over a band for the usual range, today's column far above it. The Sheet says how far off today is, ranks what drove it with a bar for each share (Compute $9.10, Egress $3.20, Storage $1.50, shares that add to 100) and offers two ways out: the only Shine Button caps compute at $5 a day, which hatches the part of today's column the cap would have removed, and "This is expected" folds today into the baseline and clears the alert. Both change the chart and the header's sentence. For preview the sheet is drawn open in place at the end of the frame when the page loads; the header button opens the real Sheet, with the same state. For cost dashboards, cloud consoles and any bill that can jump overnight.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. The Investigate button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same AnomalyBody and AnomalyActions components and share the block's state. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Where do the usual range and the 4.3 come from?
USUAL is a typed 30-day average ($3.20) and SPREAD its range ($0.90 either way); the band in the chart is that range, and 4.3 is today's $13.80 divided by $3.20. Marking the spike as expected replaces the average with the mean of the 14 columns including today, so the band moves up and the sentence says so. In your app compute both from your cost data and decide what counts as an anomaly on your server.
What does capping compute do?
In the demo it changes what is drawn: the part of today's compute above $5 (the cap) is hatched in today's column, the header says what today would have cost ($9.70), and the sheet shows compute at the cap. Reopening the sheet after either choice shows the settled state, with the buttons marked as done. Nothing is capped anywhere; to make it real, send the cap to the service that enforces your budgets.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet.
Is it accessible from the keyboard and with a screen reader?
Yes. The real sheet is named by its title and described by its sentence, focus stays inside until it closes, and Escape, the close button and both choices return focus to Investigate. The drawn chart is hidden from screen readers and a table of the 14 days sits beside it; the header's sentence carries the facts. The trigger is the button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange.
What stays local in the demo?
All of it: the 14 days, the drivers and the figures are typed constants, and the two choices only change the drawing and say so in a polite status message ("Nothing was changed on any account"). Wire the primary to the call that sets your compute budget and the other to the one that stores the baseline.