A styled card component for displaying calendar events with color indicators, status states, and action buttons.
Command Palette
Search for a command to run...
Search for a command to run...
A styled card component for displaying calendar events with color indicators, status states, and action buttons.
9:00 AM - 9:30 AM
Google Meet
2:00 PM - 3:00 PM
Conference Room A
4:00 PM - 5:00 PM
Zoom
The core of the daily briefing. Shows meetings and agenda items at a glance.
npx shadcn@latest add https://ui.heygaia.io/r/calendar-event-card.jsonimport {
CalendarEventCard,
EventTitle,
EventTime,
EventLocation,
} from "@/components/ui/calendar-event-card";
export default function Example() {
return (
<CalendarEventCard eventColor="#3b82f6">
<EventTitle>Team Meeting</EventTitle>
<EventTime startTime="9:00 AM" endTime="10:00 AM" />
<EventLocation>Conference Room A</EventLocation>
</CalendarEventCard>
);
}Tomorrow, 10:00 AM
Today, 3:00 PM
Friday, 2:00 PM
| Prop | Type | Default | Description |
|---|---|---|---|
| eventColor | string | - | Color for the left indicator bar |
| status | "idle" | "loading" | "completed" | "idle" | Action button state |
| label | string | - | Optional label above content |
| variant | "display" | "action" | "display" | Show action button when "action" |
| buttonColor | "primary" | "danger" | "primary" | Action button color |
| completedLabel | string | "Completed" | Button text when completed |
| onAction | () => void | - | Action button click handler |
| isDotted | boolean | false | Show dotted border style |
| opacity | number | 1 | Card opacity (0-1) |
EventTitle - Styled heading for event nameEventTime - Formatted time display with optional end timeEventLocation - Subtle location text