Alert

Pro

An inline callout in four variants, keyed by icon and accent bar.

A new region is available

eu-central-2 (Zurich) is now open for new deployments.

Backup completed

Snapshot db-2026-08-31 finished in 4m 12s.

Certificate expires in 7 days

api.acme.com renews automatically, but the pinned client needs a manual update.

Deploy rolled back

web-4a1 failed its health check twice and was reverted to the previous build.

Four variants, each keyed by an icon and an accent bar rather than color alone; warning and danger are announced as alerts, the rest as status. Dismissing collapses the alert and the stack slides up to close the gap. The details prop adds a Show details disclosure, action a single button.

This component installs from the private registry, which opens with Pro. The command and the one-time setup are shown here once your licence key is in this browser.

6 sections, and every other premium component

The preview above is the real Alert, running. One purchase opens the sections above on this page and on every other component in the library.

Alert

Installation

UsageThe import line, a working usage snippet, and the packages it needs.Locked. Opens the Pro checkout.

Why it existsWhy the component exists, and the problem it was built to solve.Locked. Opens the Pro checkout.

Design decisionsEvery design decision in it, and what each one was weighed against.Locked. Opens the Pro checkout.

AccessibilityThe accessibility notes, each one checkable against the source.Locked. Opens the Pro checkout.

PropsThe full props table: types, defaults, and which ones are required.Locked. Opens the Pro checkout.

SourceThe complete source file, ready to paste.Locked. Opens the Pro checkout.

6 sections, and every other premium component