Components
Loading preview...
Alert Card A visually engaging, animated alert card to deliver
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-8// demo.tsx
import * as React from "react";
import { Bell } from "lucide-react";
import { AlertCard } from "@/components/ui/card-8";
import { Button } from "@/components/ui/button";
export default function AlertCardDemo() {
const [isCardVisible, setIsCardVisible] = React.useState(true);
const handleUnderstood = () => {
console.log("User understood the alert.");
setIsCardVisible(false);
};
const handleDismiss = () => {
console.log("User dismissed the alert.");
setIsCardVisible(false);
};
// A button to reset the demo and show the card again
const handleReset = () => {
setIsCardVisible(true);
};
return (
<div className="flex h-[400px] w-full flex-col items-center justify-center gap-4">
{!isCardVisible && (
<Button onClick={handleReset}>Show Alert Card</Button>
)}
<AlertCard
isVisible={isCardVisible}
title="Don't miss your flight"
description="Hi Jonathan, You have a flight today at 02:15 PM. Better to go early to avoid road traffic."
buttonText="Okay, I Understand"
onButtonClick={handleUnderstood}
onDismiss={handleDismiss} // Provide dismiss handler to show the X button
icon={<Bell className="h-6 w-6 text-destructive-foreground" />}
/>
</div>
);
}