Event Recap ReportPRO

A post-event write-up opening on four hairline figures, then a three-photo row at mixed heights with captions, a soft panel carrying an attendee quote, and what was promised in the room.

Event100: Event Recap Report

A post-event write-up opening on four hairline figures, then a three-photo row at mixed heights with captions, a soft panel carrying an attendee quote, and what was promised in the room.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash
npx shadcn add "https://ui.beste.co/r/event100?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash
npx shadcn add "https://ui.beste.co/r-base/event100?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/event100.tsx plus the badge23 and button21 components it uses for the eyebrow and the closing actions.

Quick start

The installed file exports event100Demo alongside the block: the exact props behind the preview above. Spread it to get a working recap in one line.

tsx
import { Event100, event100Demo } from "@/components/beste/block/event100";

export default function RecapPage() {
  return <Event100 {...event100Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx
import { Event100 } from "@/components/beste/block/event100";

export default function RecapPage() {
  return (
    <Event100
      badge={{ label: "Practice Day 2026" }}
      heading="What happened in the room, for everyone who could not be in it"
      description="Forty people, seven sessions, and one argument about room naming."
      figures={[
        { value: "40", label: "practice staff in the room" },
        { value: "7", label: "sessions, none of them a product demo" },
        { value: "14", label: "changes we agreed to make on the day" },
      ]}
      frames={[
        {
          src: "/events/morning.jpg",
          alt: "A bright room before a session",
          caption: "The morning session, before the coffee ran out",
          tall: true,
        },
        {
          src: "/events/corridor.jpg",
          alt: "A small team talking around a laptop",
          caption: "The corridor conversation that produced four of the fourteen changes",
        },
      ]}
      quote={{
        text: "The first vendor event where the vendor spent more time listening than presenting.",
        name: "Idris Warren",
        practice: "Norwich Care Collective",
        avatar: { src: "/people/idris.jpg", alt: "Portrait of Idris Warren" },
      }}
      closing="The fourteen changes are tracked publicly with the name of whoever asked for them."
      buttons={[
        { label: "Watch the recordings", href: "/watch" },
        { label: "See the fourteen changes", href: "/changelog" },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }Eyebrow above the hairline rule, rendered through Badge23
headingstringSection heading in the left column of the header
descriptionstringSupporting paragraph, right-aligned from md up
figuresFigure[][]Attendance and output figures on a hairline row
framesFrame[][]Captioned photographs, one of them taller
quoteQuoteAttendee quote in a soft panel
closingstringParagraph beside the closing actions
buttonsActionLink[][]Actions, first solid and the rest outlined
classNamestringExtra classes for the outer section
ts
type ActionLink = {
  label: string;
  href: string;
};

type Figure = {
  value: string;
  label: string;
};

type Frame = {
  src: string;
  alt: string;
  caption: string;
  tall?: boolean;
};

type Quote = {
  text: string;
  name: string;
  practice: string;
  avatar: { src: string; alt: string };
};

Behavior notes

More Event blocks

View all Event
PRO

event17

Event Hosts Section

Host profiles with photos, bios, and social media links displayed in a two-column grid. Perfect for introducing conference MCs and event directors.

PRO

event97

Recorded Sessions Archive

A past events archive leading with an image tile that floats a recording card, then listing every earlier session as linked hairline rows with its date, place, and running time.

PRO

event96

Event Detail With Countdown

A single event page opening on a full-bleed photo band with a live countdown anchored into it, then pairing the pitch and two actions with a hairline table of practical facts and a speaker list.

PRO

event15

Featured Keynotes Gallery

Visual speaker grid with full-height portrait images, gradient overlays, and keynote topics. Perfect for showcasing headline speakers at major conferences.

PRO

event102

Open Hours Session Rows

Upcoming sessions as hairline rows, each opening with the date set as a figure, then the session and what it covers, with its seat state and a booking link on the end.

PRO

event19

Past Speakers Gallery

Image gallery of previous conference speakers with year badges, topics, and hover zoom effects. Perfect for showcasing event history and alumni speakers.

Markdown version