Event Card

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add event-card

Usage#

Anatomy#

A header with the date tile, the title, the time and the status, and the content under it: one row per detail, each with its glyph under the tile and its text under the title, then the actions. Every part is droppable: a reminder needs only the header.

import {
  EventCardGroup,
  EventCard,
  EventCardHeader,
  EventCardDate,
  EventCardTitle,
  EventCardTime,
  EventCardStatus,
  EventCardContent,
  EventCardLocation,
  EventCardAttendees,
  EventCardRecurrence,
  EventCardDescription,
  EventCardChange,
  EventCardConflict,
  EventCardActions,
  EventCardSkeleton,
} from "@/components/ui/event-card"

<EventCardGroup>
  <EventCard>
    <EventCardHeader>
      <EventCardDate />
      <EventCardTitle />
      <EventCardTime />
      <EventCardStatus />
    </EventCardHeader>
    <EventCardContent>
      <EventCardChange />
      <EventCardLocation />
      <EventCardAttendees />
      <EventCardRecurrence />
      <EventCardDescription />
      <EventCardConflict />
      <EventCardActions />
    </EventCardContent>
  </EventCard>
</EventCardGroup>

<EventCardSkeleton />

Status#

Four, set once on the root with status. A draft is a proposal the person still has to accept; added is on the calendar; updated was moved or edited; cancelled strikes the time through and mutes the card, so the reply still says what was called off. The chip words itself from the status, and its children rename it, for example “Added to Personal”.

Compact#

layout="compact" turns the header into one line you can click, and the card grows in place to show the details. Stack several in an EventCardGroup when the assistant added more than one: they share one frame and part with hairlines. An all-day event over several days shows the range of days and “All day”.

Changes and conflicts#

When the assistant moves an event, EventCardChange shows the old time struck through and the new one after it, while the header already shows where it landed. When a draft clashes with something on the calendar, EventCardConflict says with what, in the warning tone, before the person commits.

In a conversation#

The card sits under the reply at the column's width, with no bubble. Add the draft and the same card turns into the added event: the status and the button labels roll to their new words rather than a second card appearing. Undo takes it back.

Loading#

While the reply streams, EventCardSkeleton holds the card's shape so the text above it does not jump when the event arrives.

API reference#

FAQ#