# 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/event99. 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. Webinar Registration Split

# Webinar Registration Split[PRO](/pricing)

A live session sign-up splitting a bordered container between the pitch, a hairline table of when and how long, and a checked takeaway list, beside a soft column holding a working registration card and the hosts.

ViewCodeDocs

Base UI

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

## Event99: Webinar Registration Split

A live session sign-up splitting a bordered container between the pitch, a hairline table of when and how long, and a checked takeaway list, beside a soft column holding a working registration card and the hosts.

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/event99?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/event99.tsx`, the `form36` capture piece it holds in the tile (installed to `components/beste/piece/form36.tsx`), and the `badge23` component it uses for the eyebrow.

### Quick start

The installed file exports `event99Demo` alongside the block: the exact props behind the preview above. Spread it to get a working registration page in one line.

tsxCopy

```
import { Event99, event99Demo } from "@/components/beste/block/event99";

export default function WebinarPage() {
  return <Event99 {...event99Demo} />;
}
```

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

tsxCopy

```
import { Event99 } from "@/components/beste/block/event99";
import { Form36 } from "@/components/beste/piece/form36";

export default function WebinarPage() {
  return (
    <Event99
      badge={{ label: "Live session" }}
      heading="Migrating eleven years of records, walked through on real data"
      description="We open one practice's actual export on screen and go column by column."
      whenLabel="When"
      when="Thursday 12 June, 14:00 UK"
      lengthLabel="Length"
      length="45 minutes, plus questions until they run out"
      takeawaysTitle="What you will leave with"
      takeaways={[
        "A list of the fields your own export is likely to mangle",
        "The two places a migration usually loses a day",
      ]}
      media={
        <Form36
          label="Save me a seat"
          placeholder="you@practice.com"
          submitLabel="Register"
          finePrint="One reminder the day before, then the recording."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      hostsTitle="Run by"
      hosts={[
        {
          name: "Priya Nandan",
          role: "Migration engineer, 40+ practices moved",
          avatar: { src: "/people/priya.jpg", alt: "Portrait of Priya Nandan" },
        },
      ]}
      note="Cannot make the time? Register anyway and the recording arrives the next morning."
    />
  );
}
```

### Props

| Prop           | Type                         | Default | Description                              |
| -------------- | ---------------------------- | ------- | ---------------------------------------- |
| badge          | { label: string }            | –       | Eyebrow at the top of the pitch column   |
| heading        | string                       | –       | Session heading                          |
| description    | string                       | –       | Supporting paragraph, capped at max-w-md |
| whenLabel      | string                       | –       | Label for the date row                   |
| when           | string                       | –       | Date and time, as free text              |
| lengthLabel    | string                       | –       | Label for the duration row               |
| length         | string                       | –       | How long it runs                         |
| takeawaysTitle | string                       | –       | Heading above the checked list           |
| takeaways      | string\[\]                   | \[\]    | What attendees leave with                |
| media          | ReactNode                    | –       | Registration card, form36 in the demo    |
| image          | { src: string; alt: string } | –       | Backdrop behind the media tile           |
| hostsTitle     | string                       | –       | Heading above the host list              |
| hosts          | Host\[\]                     | \[\]    | Who is running the session               |
| note           | string                       | –       | Recording note under the hosts           |
| className      | string                       | –       | Extra classes for the outer section      |

tsCopy

```
type TileImage = {
  src: string;
  alt: string;
};

type Host = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};
```

### Behavior notes

* The two facts are separate label and value prop pairs rather than a generic array, so the table is always exactly when and how long. Each row renders only when its value is present, so a session with no fixed length simply drops that row.
* The registration form lives entirely inside the `form36` piece. This block holds no form state and has no submit handler.
* The right column is `flex flex-col justify-between`, so the hosts and the note pin to the bottom while the registration card takes the space above them. The card is `flex-1` with `min-h-64`, so it grows to fill whatever height the pitch column sets.
* The two columns split at `lg`, and the divider between them flips from `lg:border-l` to `border-t` when they stack, so the seam always runs across the join.
* Host rows use `min-w-0` with `truncate` on both lines, so a long role ellipsizes rather than pushing the portrait out of the row.
* `note` carries its own `border-t`, which separates the recording caveat from the hosts above it.
* Times are plain strings, never parsed, so the page stays free of server and client locale differences.

Wiring the form up

The registration card is a presentational piece with no submit handling of its own. When you connect it to a real list, the patterns in [React Hook Form, TanStack Form, and Formisch](/blog/shadcn-forms-react-hook-form-tanstack-formisch) cover validation and submission for this shape of single-field form.

## More Event blocks

[View all Event](/blocks/event)

[](/block/event94)

PRO

event94

### Featured Session Schedule

An events section that opens with a split featured card pairing a photo with date, time, and format lines, then lists the rest of the schedule as rows separated by hairlines, each with a bordered date tile, host meta, seat count, and register action.

[](/block/event66)

PRO

event66

### Workshop Registration Form

Interactive workshop selector with capacity tracking, attendee info form, and pricing summary. Perfect for paid workshops and training session signups.

[](/block/event26)

PRO

event26

### Workshop Registration List

Workshop cards with instructor profiles, skill levels, requirements, and live capacity tracking. Perfect for hands-on conference workshops and training sessions.

[](/block/event16)

PRO

event16

### Panel Discussion Section

Panel session card featuring moderator highlight, panelist grid, discussion topic, and scheduled time. Perfect for industry panels and expert roundtables.

[](/block/event4)

PRO

event4

### Conference Hero with Image

Split-layout event hero displaying conference details with date, location, attendee count, and featured image. Perfect for developer conferences and tech summits.

[](/block/event98)

PRO

event98

### Multi-City Tour Dates

A tour schedule listing each city as a linked hairline row with its venue, date, and remaining seats, muting the sold-out stops, beside a sticky tile that floats a live locations card.

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