Skip to main content

​
Basic usage

import { EventCard } from 'evento-embed-react';

export function Card() {
  return <EventCard eventId="evt_abc123" />;
}

​
Advanced usage

import { EventCard } from 'evento-embed-react';

export function Card() {
  return (
    <EventCard
      eventId="evt_abc123"
      variant="compact"
      showOrganizer
      onRegisterClick={(event) => {
        window.location.href = `https://evento.so/e/${event.slug}`;
      }}
      theme={{ primary: '#000000', background: '#ffffff', text: '#333333' }}
    />
  );
}

​
Props

​
eventId
string
required
Event identifier in evt_xxxxx format.
​
variant
string
default:"default"
Display style: default, compact, or detailed.
​
showOrganizer
boolean
default:"true"
Shows organizer profile metadata when enabled.
​
onRegisterClick
function
Callback signature: (event: Event) => void.
​
theme
object
Theme object with primary, background, and text values.
​
className
string
Additional CSS class names.
​
fallback
ReactNode
Optional fallback UI for missing or invalid event IDs.

​
Next steps

Event calendar

Render event timelines for creator accounts.

Event list

Render multi-event feeds with filters.