How do I decide when to show this alert?

That logic lives on your side, not in the component. Compare current spend against a rolling average in your backend or a scheduled job, and render this block once the difference crosses whatever threshold you choose.

Does the Review usage button do anything by default?

No. It's a link styled as a button. Point actionHref at your usage or billing detail page.

What happens when I click Dismiss for 24h?

Nothing automatic. It's also a plain link. Wire dismissHref to an endpoint or route that records the dismissal and suppresses the alert for a day on your end.

Can I show more than one anomaly at once?

Render multiple Billing145 instances stacked in a list. There's no built-in carousel or multi-alert stack inside the component itself.

How do I switch the alert to the critical red styling?

Pass severity="critical". It swaps the border, icon, and pill colors from amber to red, everything else about the layout stays the same.

Can I hide the resource breakdown?

Yes, just omit the resources prop or pass an empty array. The whole 'Largest contributors' section is skipped when there's nothing to show.

Billing Usage Anomaly Alert

An alert card for flagging a usage spike before it turns into a surprise bill. It shows the current period's spend next to a 30-day average, a percent-over pill, and an optional list of the resources contributing most to the spike. Two actions sit at the bottom: one to review the usage in more detail and one to dismiss the alert for a day.

By Staaarter Team

Billing

Updated June 18, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-usage-anomaly-alert.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing145.tsx instead.

Usage

The file also exports billing145Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing145, billing145Demo } from "@/components/blocks/billing/billing145";

export default function Page() {
  return <Billing145 {...billing145Demo} />;
}

Props

Prop	Type	Default	Description
title	string	"Unusual spending detected"	Heading shown at the top of the alert.
severity	"warning" \| "critical"	"warning"	Controls the amber-vs-red color treatment of the border, icon, and pill.
message	string	none	One-line explanation shown under the heading.
currentUsage	string	none	Formatted spend for the current period, e.g. "$1,842.00".
averageUsage	string	none	Formatted 30-day average spend, shown next to currentUsage.
percentOverAverage	string	none	Formatted percentage shown in the pill next to the title, e.g. "56%".
resources	AnomalyResource[]	[]	Optional list of resources driving the spike. The section is omitted entirely when the array is empty.
actionLabel	string	"Review usage"	Label for the primary action button.
actionHref	string	"#"	Destination for the primary action.
dismissLabel	string	"Dismiss for 24h"	Label for the secondary, lower-emphasis button.
dismissHref	string	"#"	Destination for the dismiss action.
className	string	none	Extra classes for the outer container.

Types

interface AnomalyResource {
  name: string;
  amount: string;
  share: string;
}

Behavior notes

Purely presentational: currentUsage, averageUsage, and percentOverAverage are all pre-formatted strings the caller computes, the component does no math on them.
severity swaps the border, icon, and pill colors between amber (warning) and red (critical) via a single STYLES lookup, nothing else changes.
The resources list renders only when at least one item is passed; there's no built-in empty state or loading skeleton for it.
Both bottom actions are next/link elements styled as buttons, not onClick handlers, so 'dismiss' has to be wired to a real route or query param on your end to actually suppress the alert.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.