Components / Feedback
Alert
Communicates contextual feedback.
Preview
Changes published
The new version is now available.
1import {2 Alert,3 AlertDescription,4 AlertTitle,5} from "@/components/ui/alert"6
7export function AlertDemo() {8 return (9 <Alert variant="default">10 <AlertTitle>Changes published</AlertTitle>11 <AlertDescription>The new version is now available.</AlertDescription>12 </Alert>13 )14}success
The success style of this component.
Changes published
The new version is now available.
1import {2 Alert,3 AlertDescription,4 AlertTitle,5} from "@/components/ui/alert"6
7export function AlertDemo() {8 return (9 <Alert variant="success">10 <AlertTitle>Changes published</AlertTitle>11 <AlertDescription>The new version is now available.</AlertDescription>12 </Alert>13 )14}warning
The warning style of this component.
Changes published
The new version is now available.
1import {2 Alert,3 AlertDescription,4 AlertTitle,5} from "@/components/ui/alert"6
7export function AlertDemo() {8 return (9 <Alert variant="warning">10 <AlertTitle>Changes published</AlertTitle>11 <AlertDescription>The new version is now available.</AlertDescription>12 </Alert>13 )14}destructive
The destructive style of this component.
Changes published
The new version is now available.
1import {2 Alert,3 AlertDescription,4 AlertTitle,5} from "@/components/ui/alert"6
7export function AlertDemo() {8 return (9 <Alert variant="destructive">10 <AlertTitle>Changes published</AlertTitle>11 <AlertDescription>The new version is now available.</AlertDescription>12 </Alert>13 )14}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/alertUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.