Experience / Application
Event Details
One event, in full: what it is, when and where, and what you got out of it.
The hero carries everything you would check on a phone in a lobby — the name, the date, the room, and whether you said you were coming — because that is what this page is opened for on the day. Everything a person reads once, before deciding, is below it.
The last section is the event's point. An event in MeetCard is not a calendar entry, it is where a handful of cards came from, so the page ends on the people: who you already know that is going, before it happens, and whose cards you left with, after. Those are two different facts and the page says which one it is showing rather than printing "cards exchanged" over an event three weeks away.
Nothing persists. An RSVP made here lives for as long as the page does.
Not exported from @meetcard/deck — this is a composed screen, built from the components below rather than shipped as one.
Stories
A conference two weeks out. Everything you would check standing in a lobby is in the hero; everything you read once, before deciding, is below it.
Source
const Default = () => <EventDetail />;The RSVP moves the tally it sits above, so a person sees their own answer in the same numbers everyone else sees.
Source
const AnsweringTheRsvp = () => <EventDetail />;An event you are hosting. The edit link appears only here — on someone else's conference it would be a control that cannot do what it offers.
Source
const HostingIt = () => <EventDetail slug="boulder-climate" />;After the fact. The page stops asking whether you are coming and starts answering what you came away with — which is the only reason an event is still in the product a year later.
Source
const APastEvent = () => <EventDetail slug="saas-north" />;Most events are entered in twenty seconds with no picture at all. The hero falls back to the brand under the same scrim, so the page is quieter rather than broken.
Source
const WithoutACover = () => <EventDetail slug="founders-dinner" />;A link that has gone stale. Said plainly, with the way back.
Source
const NoSuchEvent = () => <EventDetail slug="a-party-that-never-was" />;Phone. The event's header is a card, so it stands up here: a fixed 1:1.75 box, with the content fitting inside it rather than pushing it taller.
Source
const Mobile = () => <EventDetail />;In the shell, with Events still lit on the rail.
Source
const InTheShell = () => (
<AppShell currentId="/events">
<EventDetail />
</AppShell>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultCounts | RsvpCounts | { yes: 421, maybe: 18, no: 4 } | The tally the RSVP moves. |
defaultRsvp | 'yes' | 'maybe' | 'no' | 'yes' | Where the RSVP starts. |
events | AppEvent[] | [
{
slug: 'revops-summit',
name: 'RevOps Summit',
date: '2027-05-18',
time: '9:00 AM',
endTime: '4:30 PM',
venue: 'Austin Convention Center',
city: 'Austin, Texas',
address: '500 E Cesar Chavez St, Austin, Texas',
attendance: 'attending',
coverSrc: COVERS.revops,
host: { name: 'Hannah Davis', detail: 'Community Lead, RevOps Collective' },
going: ['Hannah Davis', 'Marcus Lee', 'Priya Shah'],
expected: 420,
about: [
'A full day of operators trading the unglamorous details: routing rules, attribution models, and the spreadsheets nobody admits to running the business on.',
'Bring cards — the hallway track is the real program.',
],
schedule: [
{ time: '9:00 AM', title: 'Doors and coffee' },
{ time: '10:00 AM', title: 'Keynote: Pipeline you can trust' },
{ time: '12:30 PM', title: 'Lunch and card exchange' },
{ time: '2:00 PM', title: 'Breakouts' },
{ time: '4:30 PM', title: 'Closing reception' },
],
},
{
slug: 'boulder-climate',
name: 'Boulder Climate Happy Hour',
date: '2027-06-16',
time: '5:30 PM',
venue: 'Rayback Collective',
city: 'Boulder, Colorado',
address: '2775 Valmont Rd, Boulder, Colorado',
attendance: 'hosting',
coverSrc: COVERS.climate,
host: { name: 'Alex Rivera', detail: 'Design Lead, Northwind Studio' },
going: ['Hannah Davis'],
expected: 60,
about: [
'Drinks on the patio with the people building climate tools in the Front Range. No panel, no slides.',
],
},
{
slug: 'saastr-annual',
name: 'SaaStr Annual',
date: '2027-09-09',
time: '10:00 AM',
endTime: '6:00 PM',
venue: 'Moscone West',
city: 'San Francisco, California',
address: '800 Howard St, San Francisco, California',
attendance: 'speaking',
coverSrc: COVERS.saastr,
host: { name: 'SaaStr', detail: 'Conference' },
expected: 12_000,
about: [
'The big one. Three halls, a thousand conversations, and a badge scanner you will want to leave in your bag.',
],
schedule: [
{ time: '10:00 AM', title: 'Opening remarks' },
{ time: '11:30 AM', title: 'Panel: What operators actually measure' },
{ time: '2:00 PM', title: 'Your session: Designing for the handshake' },
],
},
{
slug: 'founders-dinner',
name: 'Founders Dinner',
date: '2027-11-02',
time: '7:00 PM',
venue: 'The Wayfarer',
city: 'Denver, Colorado',
address: '1600 15th St, Denver, Colorado',
attendance: 'hosting',
host: { name: 'Alex Rivera', detail: 'Design Lead, Northwind Studio' },
expected: 12,
about: ['Six to a table, one long conversation, no name badges.'],
},
{
slug: 'frontend-denver',
name: 'Frontend Denver',
date: '2027-02-11',
time: '6:00 PM',
venue: 'Industry RiNo',
city: 'Denver, Colorado',
address: '3001 Brighton Blvd, Denver, Colorado',
attendance: 'attending',
host: { name: 'Mira Okafor', detail: 'Organiser' },
exchanged: ['Mira Okafor', 'Theo Marsh', 'June Park', 'Sam Ortiz'],
about: ['Two talks and a long hallway track.'],
},
{
slug: 'saas-north',
name: 'SaaS North',
date: '2026-11-19',
time: '9:30 AM',
endTime: '5:00 PM',
venue: 'Shaw Centre',
city: 'Ottawa, Ontario',
address: '55 Colonel By Dr, Ottawa, Ontario',
attendance: 'attending',
host: { name: 'SaaS North', detail: 'Conference' },
exchanged: [
'Ada Chen',
'Owen Hale',
'Nora Quinn',
'Arlo Bennett',
'Dev Patel',
],
about: ['Canada’s SaaS conference, in the cold.'],
},
] | — |
slug | string | 'revops-summit' | Which event to show, by slug. Stands in for the route parameter. |
today | string | '2027-05-04' | ISO date the page reads "upcoming" from. Pinned in stories and tests. |