Copy page

Components

EventCard

src/lib/components/ui/event-card/

Purpose

A composable card for rendering error and notification events in the shell errors panel and in toasts. Provides Root, Icon, Label, Title, Message, and Time sub-components so each event's layout is fully controlled by the consumer.

Origin

Custom — fully Primebrick-written. Uses @lucide/svelte icons (CircleAlert, Info, TriangleAlert, CircleCheck) and $lib/utils. Not vendored from any registry.

Usage

Default (info event)

Code
<script>
  import { EventCardRoot, EventCardIcon, EventCardLabel, EventCardTitle, EventCardMessage, EventCardTime } from '$lib/components/ui/event-card';
</script>

<EventCardRoot>
  <div class="flex gap-3">
    <EventCardIcon eventColor="info" />
    <div class="flex flex-col gap-1">
      <EventCardLabel>auth</EventCardLabel>
      <EventCardTitle>Session refreshed</EventCardTitle>
      <EventCardMessage>Token rotated successfully.</EventCardMessage>
      <EventCardTime>{new Date().toISOString()}</EventCardTime>
    </div>
  </div>
</EventCardRoot>

Error event

Code
<EventCardIcon eventColor="error" />

Warning event

Code
<EventCardIcon eventColor="warning" />

Success event

Code
<EventCardIcon eventColor="success" />

Critical event

Code
<EventCardIcon eventColor="critical" />

eventColor mapping

eventColor	Icon	Styling
info	Info	sky
warning	TriangleAlert	amber
error	CircleAlert	red
critical	CircleAlert	red
success	CircleCheck	emerald

Props

Full prop table: see API reference — eventcard.

EventCardIcon props: eventColor?: "critical" | "error" | "warning" | "info" | "success" = "info", class?: string.

Next steps

• Component catalog
• App shell — where the errors panel lives
• API reference