# Card 12 - Upcoming Events Card

> List upcoming events with date, time, and type badges in a clean bordered card. Suitable for education platforms, school portals, and event calendars.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/upcoming-events-card).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/upcoming-events-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/upcoming-events-card-light-4b30ef101ba63016.png
- Registry item: https://shadcndashboard.dev/r/upcoming-events-card.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/upcoming-events-card.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `badge`

## Files

### `src/components/shadcn-dashboard/blocks/cards/upcoming-events-card.tsx`

```tsx
import { Calendar, Clock } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { Badge } from "@/components/ui/badge";

const events = [
  {
    id: "1",
    title: "Mid-term Examinations",
    date: "Jun 20, 2026",
    time: "9:00 AM",
    type: "Exam",
    typeClass: "bg-destructive/10! text-destructive!",
  },
  {
    id: "2",
    title: "Science Fair",
    date: "Jun 25, 2026",
    time: "10:00 AM",
    type: "Event",
    typeClass: "bg-chart-2/10! text-chart-2!",
  },
  {
    id: "3",
    title: "Parent-Teacher Meeting",
    date: "Jun 28, 2026",
    time: "2:00 PM",
    type: "Meeting",
    typeClass: "bg-orange-600/10! text-orange-600!",
  },
  {
    id: "4",
    title: "Annual Sports Day",
    date: "Jul 5, 2026",
    time: "8:00 AM",
    type: "Event",
    typeClass: "bg-chart-2/10! text-chart-2!",
  },
  {
    id: "5",
    title: "Final Examinations",
    date: "Jul 15, 2026",
    time: "9:00 AM",
    type: "Exam",
    typeClass: "bg-destructive/10! text-destructive!",
  },
];

export default function UpcomingEvents() {
  return (
     <div className="w-full max-w-sm">
     <Card className="gap-0!">
      <CardHeader className="border-b border-border">
        <CardTitle className="flex items-center gap-2">
          <Calendar size={16} className="text-muted-foreground" />
          Upcoming Events
        </CardTitle>
      </CardHeader>
      <CardContent className="px-0!">
        {events.map((event, index) => (
          <div
            key={event.id}
            className={`flex items-start justify-between gap-3 px-5 py-4 ${
              index < events.length - 1 ? "border-b border-border" : ""
            }`}
          >
            <div className="flex flex-col gap-1 min-w-0">
              <p className="text-sm font-medium text-foreground truncate">{event.title}</p>
              <div className="flex items-center gap-3 flex-wrap">
                <div className="flex items-center gap-1 text-xs text-muted-foreground">
                  <Calendar size={11} />
                  {event.date}
                </div>
                <div className="flex items-center gap-1 text-xs text-muted-foreground">
                  <Clock size={11} />
                  {event.time}
                </div>
              </div>
            </div>
            <Badge className={event.typeClass}>{event.type}</Badge>
          </div>
        ))}
      </CardContent>
    </Card>
    </div>
  );
}
```