Event Card

Cards 49

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Event Card to your project and fits it to your theme.

Code

How Event Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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>
  );
}