Components/Alert

Alert

A prominent message that communicates status, context, or an important update.

Interactive example

Installation

Run the CLI from your project root. Dependencies and component source are added automatically.

$npx quackelements add alert

Usage

The generated file lives in your repository, so the component API and styles remain fully editable.

example.tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/quack/alert"
import { CheckCircle2 } from "lucide-react"

export function AlertDemo() {
  return (
    <Alert>
      <CheckCircle2 />
      <AlertTitle>Deployment complete</AlertTitle>
      <AlertDescription>Your changes are live in production.</AlertDescription>
    </Alert>
  )
}