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.
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.
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
npx shadcn add "https://ui.beste.co/r/event100?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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" },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
figures | Figure[] | [] | Attendance and output figures on a hairline row |
frames | Frame[] | [] | Captioned photographs, one of them taller |
quote | Quote | – | Attendee quote in a soft panel |
closing | string | – | Paragraph beside the closing actions |
buttons | ActionLink[] | [] | Actions, first solid and the rest outlined |
className | string | – | Extra classes for the outer section |
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 };
};tall on a frame switches it from h-64 md:h-80 to h-80 md:h-[26rem], which is what breaks the photo row out of a uniform strip. Marking every frame tall removes the effect.md:items-start on the photo row is load-bearing: without it the grid would stretch every frame to the tallest one and the height difference would disappear.figure and figcaption pairs, so captions stay associated with their images.quote.text as plain text.border-t, so the rules are per column and stop at the gaps. They use tabular-nums, so a row mixing "40" and "6:12" still lines up.shrink-0, so the paragraph gives way first when space is tight.event17
Host profiles with photos, bios, and social media links displayed in a two-column grid. Perfect for introducing conference MCs and event directors.
event97
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.
event96
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.
event15
Visual speaker grid with full-height portrait images, gradient overlays, and keynote topics. Perfect for showcasing headline speakers at major conferences.