Alert
A styled component that displays important information or feedback to the user, often used for warnings, errors, or success messages.
This preview shows a live example of the Alert component. Interact with it to see how it presents information.
Installation
To use the Alert component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.
The CLI command is the easiest way to add the Alert component. It automatically handles downloading the necessary code and dependencies for you. Running this command in your project's terminal will add the alert component files.
npx shadcn@latest add alertUsage
Once installed, you can use the Alert component in your application. First, import the necessary parts: Alert (the main container), AlertTitle (for the heading), and AlertDescription (for the body text).
Alert, // The main container for the alert message
AlertDescription, // The primary content of the alert
AlertTitle, // The title or heading for the alert
} from "@/components/ui/alert"; // Adjust this path based on your project structureHere's a basic example of how to structure the Alert in your TSX code.
Alertwraps the entire message.An optional icon (like
<Terminal />) can be placed inside.AlertTitleprovides a concise heading.AlertDescriptioncontains the main message body.
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>Examples
Default
This is the standard appearance of the Alert component.
Destructive
Use the destructive variant for critical warnings or error messages.