New

Banner Alert

Dismissible banner alerts with icons, messages, and actions

Feedback & Statusbanneralertnotificationdismissible

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add alert

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
4
5export default function BannerAlert() {
6  return (
7    <div className="space-y-4 p-6">
8      <Alert className="border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/30">
9        <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
10        <AlertTitle className="text-blue-900 dark:text-blue-100">New Update Available</AlertTitle>
11        <AlertDescription className="flex items-center justify-between text-blue-700 dark:text-blue-300">
12          <span>Version 2.0 is now available with new features.</span>
13          <Button variant="link" className="h-auto p-0 text-blue-700 underline dark:text-blue-300">
14            Update Now
15          </Button>
16        </AlertDescription>
17        <Button variant="ghost" size="icon" className="absolute right-2 top-2 h-6 w-6 text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-blue-900">
18          <X className="h-4 w-4" />
19        </Button>
20      </Alert>
21
22      <Alert className="border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30">
23        <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
24        <AlertTitle className="text-green-900 dark:text-green-100">Payment Successful</AlertTitle>
25        <AlertDescription className="flex items-center justify-between text-green-700 dark:text-green-300">
26          <span>Your subscription has been renewed successfully.</span>
27          <Button variant="link" className="h-auto p-0 text-green-700 underline dark:text-green-300">
28            View Receipt
29          </Button>
30        </AlertDescription>
31        <Button variant="ghost" size="icon" className="absolute right-2 top-2 h-6 w-6 text-green-600 hover:bg-green-100 dark:text-green-400 dark:hover:bg-green-900">
32          <X className="h-4 w-4" />
33        </Button>
34      </Alert>
35
36      <Alert className="border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30">
37        <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
38        <AlertTitle className="text-amber-900 dark:text-amber-100">Storage Limit Warning</AlertTitle>
39        <AlertDescription className="flex items-center justify-between text-amber-700 dark:text-amber-300">
40          <span>You've used 90% of your storage space.</span>
41          <Button variant="link" className="h-auto p-0 text-amber-700 underline dark:text-amber-300">
42            Upgrade Plan
43          </Button>
44        </AlertDescription>
45        <Button variant="ghost" size="icon" className="absolute right-2 top-2 h-6 w-6 text-amber-600 hover:bg-amber-100 dark:text-amber-400 dark:hover:bg-amber-900">
46          <X className="h-4 w-4" />
47        </Button>
48      </Alert>
49
50      <Alert className="border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30">
51        <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
52        <AlertTitle className="text-red-900 dark:text-red-100">Connection Failed</AlertTitle>
53        <AlertDescription className="flex items-center justify-between text-red-700 dark:text-red-300">
54          <span>Unable to connect to the server. Please try again.</span>
55          <Button variant="link" className="h-auto p-0 text-red-700 underline dark:text-red-300">
56            Retry
57          </Button>
58        </AlertDescription>
59        <Button variant="ghost" size="icon" className="absolute right-2 top-2 h-6 w-6 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">
60          <X className="h-4 w-4" />
61        </Button>
62      </Alert>
63    </div>
64  );
65}