Alert

Loading code...

Installation

pnpm dlx shadcn@latest add @uitopia/alert

Usage

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

With Icon

Loading code...

With Icon and Action Buttons

Loading code...

Info Alert

Loading code...

Success Alert

Loading code...

Warning Alert

Loading code...

Error Alert

Loading code...

Comparing with shadcn

New Variants

We've added new colored variants for better semantic meaning:

Variant	Description
`info`	Displays an info alert (blue)
`success`	Displays a success alert (green)
`warning`	Displays a warning alert (yellow)
`error`	Displays a error alert (red)

Ensure you have the following variables imported in your CSS file:

--destructive-foreground
--info
--info-foreground
--success
--success-foreground
--warning
--warning-foreground

Alert

On this page