Alert

A callout that surfaces important contextual information — such as a status update or a failure — without interrupting the user's flow.

Alert

Booking confirmed

Your stay at Casa Azul is booked for Sep 18 – 21. We've sent the details to maya@example.com.

Installation

pnpm dlx shadcn@latest add @sortui/alert

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@/components/ui/alert"

Payment failed

Your card ending in 4242 was declined. Update your payment method to keep Premium.

Your free trial ends in 3 days

Upgrade to keep offline downloads and ad-free listening.

Your changes have been saved.

You're offline. We'll sync when you reconnect.

Unable to process your payment

Please check the following and try again:

Get the full Figma kit, the code of 180+ sections and every future update for one payment.