Alert

Contextual feedback messages with variants and icons.

Preview

Heads up

This is a default alert message.

Info

Your trial expires in 3 days.

Success

Your changes have been saved.

Error

Something went wrong. Please try again.

Installation

npx drivn add alert

Usage

1 import { Alert } from "@/components/ui/alert"
2 
3 export default function Page() {
4   return (
5     <Alert title="Heads up!">
6       You can add components to your app using the CLI.
7     </Alert>
8   )
9 }

API Reference

Prop	Type	Default	Description
`variant`	"default" \| "info" \| "success" \| "destructive"	"default"	Visual style of the alert
`icon`	ComponentType \| ReactElement	—	Icon component (Info) or element (<Info className="..." />)
`title`	string	—	Bold title text displayed above the alert content
`className`	string	—	Additional CSS classes to apply to the alert container
`children`	ReactNode	—	The content rendered inside the alert body

1	import { Alert } from "@/components/ui/alert"
2
3	export default function Page() {
4	return (
5	<Alert title="Heads up!">
6	You can add components to your app using the CLI.
7	</Alert>
8	)
9	}