# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/event100. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-03

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Event](/blocks/event)
5. /
6. Event Recap Report

# Event Recap Report[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/event100`

## 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 NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| 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                       |

tsCopy

```
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

* `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.
* Frames are real `figure` and `figcaption` pairs, so captions stay associated with their images.
* Quotation marks around the quote are added by the block as entities, so pass `quote.text` as plain text.
* Figures each carry their own `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.
* The figures grid reflows one, two, then four across, so a four-item row never leaves a single orphan at tablet width.
* The closing row keeps its actions `shrink-0`, so the paragraph gives way first when space is tight.

## More Event blocks

[View all Event](/blocks/event)

[](/block/event17)

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.

[](/block/event97)

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.

[](/block/event96)

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.

[](/block/event15)

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.

[](/block/event102)

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.

[](/block/event19)

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.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.