Components
Loading preview...
Event Card A visually appealing card to display event details, including title, date, time, location, and frequency. It features a subtle load-in and hover animation for a modern user experience.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/event-card// demo.tsx
import { EventCard } from "@/components/ui/event-card";
import { PartyPopper, MapPin } from "lucide-react";
/**
* A demo component to showcase the EventCard.
*/
export default function EventCardDemo() {
return (
<div className="flex min-h-[400px] w-full items-center justify-center bg-background p-4">
<EventCard
icon={<PartyPopper className="h-5 w-5" />}
title="Big Night Out"
date="26 Aug"
startTime="20:00"
endTime="22:00"
locationIcon={<MapPin className="h-4 w-4 text-primary" />}
location="Sky Garden, London"
frequency="4 Weeks"
/>
</div>
);
}