Data Display
Forms
Navigation
Alert
A callout for displaying important information.
Heads up!
Describe what can be done about it here.
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
<p>Describe what can be done about it here.</p>
</AlertDescription>
</Alert>
);
}
Installation
pnpm dlx cnippet@latest add 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
Info Alert
Heads up!
Describe what can be done about it here.
import { InfoIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="info">
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Success Alert
Heads up!
Describe what can be done about it here.
import { CircleCheckIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="success">
<CircleCheckIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Warning Alert
Heads up!
Describe what can be done about it here.
import { TriangleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="warning">
<TriangleAlertIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}
Error Alert
Heads up!
Describe what can be done about it here.
import { CircleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export default function Particle() {
return (
<Alert variant="error">
<CircleAlertIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Describe what can be done about it here.
</AlertDescription>
</Alert>
);
}