Card

Cards 205

About

Event Scheduler Card Compact scheduling widget highlighting upcoming events with date, time, and location. Ideal for calendar apps to provide at-a-glance reminders and quick event actions.

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

Code

How 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/card-14"; // Adjust the import path as needed

export default function EventCardDemo() {
  const eventDate = new Date("2025-03-11T10:30:00");

  const handleMarkEvent = () => {
    // In a real app, this would handle the logic for marking the event.
    console.log("Event action clicked!");
    alert("Event marked!");
  };

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <EventCard
        heading="Scheduling"
        description="You have one scheduled event today – don't miss it!"
        date={eventDate}
        imageUrl="https://cdn.21st.dev/assets/mirror/47/47e6f6ee552ab6d1919c5b3249c4976790152f17123f38fd36bce867112d01c1.jpg"
        imageAlt="Lush lavender fields under a clear sky with a single tree."
        eventName="Expo World Press Photo Montreal"
        location="325 Rue de la Commune E"
        time="10:30 AM"
        actionLabel="Mark this event"
        onActionClick={handleMarkEvent}
      />
    </div>
  );
}