Event Recap Report

A post-event write-up. Opens with a row of 4 hairline-divided stat figures (attendees, sessions, tracks, would-attend-again rate), then a 3-photo row at a matching aspect ratio each with a short caption, then a soft-background panel carrying an attendee quote, and finally a short "what we promised" recap list referencing the original pitch. Perfect for a wrap-up or highlights page published after a conference.

By Staaarter Team

Event

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/event-recap-report.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/event/event27.tsx instead.

Usage

The file also exports event27Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Event27, event27Demo } from "@/components/blocks/event/event27";

export default function Page() {
  return <Event27 {...event27Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading, e.g. "Recap".
heading	ReactNode	none	Section heading.
description	string	undefined	Supporting copy under the heading.
stats	RecapStat[]	none	Stat figures rendered in the hairline-divided strip; the demo uses 4.
photos	RecapPhoto[]	none	Photos rendered in the photo row, each with a caption; the demo uses 3, all rendered at the same aspect ratio.
quote	string	none	Attendee quote/testimonial shown in the soft-background panel.
attendee	{ name: string; title: string; avatar?: { src: string; alt: string } }	none	Attendee credited for the quote.
recapHeading	string	"What we promised"	Heading above the closing recap list.
recapItems	string[]	none	Bullet items recapping what the event's original pitch promised.
className	string	none	Extra classes for the outer section element.

Types

interface RecapStat {
  label: string;
  value: string;
}

interface RecapPhoto {
  image: { src: string; alt: string };
  caption: string;
}

Behavior notes

This is a static, presentational block: stats, photos, the quote, and the recap list all render fixed props with no live data source.
The photo row renders every photo at the same fixed aspect-3/4 ratio (object-cover), regardless of the source image's own dimensions, so the row always looks even rather than mixed-height.
There is no share, download, or CTA action anywhere in this block — it is a read-only recap write-up.

More Event Blocks

View all →

conference-hero-with-image

Conference Hero with Image

Split hero with a featured photo, date badge, location, attendee stat, and dual CTAs.

minimal-event-hero

Minimal Event Hero

Centered, image-free hero with an oversized heading, date/location line, and two CTAs.

event-hero-with-ticket-pricing

Event Hero with Ticket Pricing

Centered hero with an early-bird price, a strikethrough original price, and a deadline note.

event-hero-with-social-proof

Event Hero with Social Proof

Hero with a heading, a 3-stat strip (attendees/speakers/countries), and a trusted-by company row.

personal-schedule-builder

Personal Schedule Builder

Interactive session picker that lets attendees build their own conference agenda.

team-discount-calculator

Team Discount Calculator

Live quantity stepper that applies tiered group discounts to a seat total.