Sections

Components

Utilities

Forms

Hooks

useIsMobile

Alert

Copy Markdown

Displays an alert for user attention.

PreviewCode

Heads up!

You can add icons to alerts to provide visual context and improve user experience.

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/alert

Anatomy#

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Usage#

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add icons to alerts.</AlertDescription>
  <AlertAction>
    <Button size="xs" variant="ghost">Dismiss</Button>
    <Button size="xs">Update</Button>
  </AlertAction>
</Alert>

Variants#

Default#

PreviewCode

Deployment successful

You can now start building your next great project.

Info#

PreviewCode

New update available

A new update is available. Check it out now.

Warning#

PreviewCode

Storage almost full

Your storage is almost full. Consider upgrading your plan to avoid losing data.

Success#

PreviewCode

Payment successful

Your payment has been processed successfully. You will receive a receipt in your email.

Destructive#

PreviewCode

Session expired

Your session has expired. Please log in again.

Examples#

With icon#

PreviewCode

New Feature Available

Icons can be added to alerts to provide visual context and improve user experience.

With action#

PreviewCode

New update available

Check it out now.

IgnoreUpdate

Custom color#

PreviewCode

Fancy alert, huh?

This is a fancy alert with a custom color.

API Reference#

Alert#

Root component.

Prop	Type	Default
`variant`	`"default"	"info"
`className`	`string`	`-`
`asChild`	`boolean`	`false`

AlertTitle#

Title text.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

AlertDescription#

Description text.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

AlertAction#

Container for action buttons. Automatically positioned to the right on larger screens.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

[

Alert Dialog ](/docs/components/alert-dialog)[

Announcement ](/docs/components/announcement)

On This Page

Installation Anatomy Usage Variants Default Info Warning Success Destructive Examples With icon With action Custom color API Reference Alert AlertTitle AlertDescription AlertAction