Alert

Ready

Inline message.

Saved

Your changes are live.

Installation

$ npx @oratiq-js/ui add alert

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Alert, AlertTitle, AlertDescription, AlertContent, alertVariants } from "@/components/ui/alert";

Variants

Heads up

This plan renews on 1 August.

New in v0.2

Combobox and Data Table are now available.

Saved

Your changes are live.

Storage almost full

You're using 92% of your quota.

Payment failed

We couldn't charge your card.

Which role does it get?

Destructive and warning alerts render role="alert", which interrupts a screen reader immediately. Info and success render role="status" and wait for a pause. Getting this backwards either buries an error or talks over the user.

View source on GitHub → components/ui/alert.tsx