# 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/event94. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

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. Featured Session Schedule

# Featured Session Schedule[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

## Event94: Featured Session Schedule

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

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/event94.tsx` plus the `badge23` and `button21` components it uses for the eyebrow, the featured tag, and the register actions.

### Quick start

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

tsxCopy

```
import { Event94, event94Demo } from "@/components/beste/block/event94";

export default function EventsPage() {
  return <Event94 {...event94Demo} />;
}
```

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

tsxCopy

```
import { Event94 } from "@/components/beste/block/event94";

export default function EventsPage() {
  return (
    <Event94
      badge={{ label: "Sessions" }}
      heading="Live sessions, run by the people who built it"
      featured={{
        image: { src: "/images/reception.jpg", alt: "A reception desk in soft light" },
        tag: "Next up",
        title: "From first hello to final invoice",
        description: "A full walkthrough of one member's journey, questions at the end.",
        date: "Thursday, May 08",
        time: "15:00 CET, 60 minutes",
        format: "Live workshop, 40 seats",
        button: { label: "Save a seat", href: "/sessions/walkthrough" },
      }}
      items={[
        {
          month: "May",
          day: "14",
          title: "Migrating from spreadsheets",
          format: "Workshop",
          duration: "45 min",
          host: "Priya Anand",
          seats: "12 seats left",
          button: { label: "Register", href: "/sessions/migrating" },
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                                     |
| ----------- | ----------------- | ------- | --------------------------------------------------------------- |
| badge       | { label: string } | –       | Monospace eyebrow above the hairline rule, rendered via Badge23 |
| heading     | string            | –       | Section heading in the left column                              |
| description | string            | –       | Supporting paragraph, right-aligned from md up                  |
| featured    | FeaturedEvent     | –       | Split card above the list, with its own photo and detail lines  |
| items       | EventItem\[\]     | \[\]    | Schedule rows under the featured card                           |
| className   | string            | –       | Extra classes for the outer <section>                           |

tsCopy

```
type ActionLink = { label: string; href: string };

type FeaturedEvent = {
  image: { src: string; alt: string };
  tag: string;
  title: string;
  description: string;
  date: string;
  time: string;
  format: string;
  button: ActionLink;
};

type EventItem = {
  month: string;
  day: string;
  title: string;
  format: string;
  duration: string;
  host: string;
  seats: string;
  button: ActionLink;
};
```

### Behavior notes

* Dates are display strings, not `Date` objects. The block never parses, sorts, or compares them, so rows render in the order you pass them and a past session stays on the page until it leaves the data.
* The date tile splits `month` and `day` into two fields on purpose, which is what lets the tile stay a fixed `size-16` square whatever the month abbreviation is.
* `seats` is free text, so the same field carries `12 seats left` and `Open to all` without a separate availability flag or any logic in the block.
* The featured card's photo column is `h-64` on mobile and switches to `md:h-auto`, so from `md` it stretches to whatever height the detail column ends up needing.
* The three detail lines each pair a Lucide icon with the value, with the icon muted and the value in full contrast, so the calendar, clock, and format read as a set rather than as body copy.
* Every register action is its own `ActionLink` through `Button21`, in the hairline outline tone in the list and the solid tone on the featured card, which is the only visual weighting between them.
* Rows carry a bottom rule that is dropped on the last one, so the schedule closes flush against the section's bottom padding.

## More Event blocks

[View all Event](/blocks/event)

[](/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/event25)

PRO

event25

### Featured Sessions Grid

Session cards displaying talk titles, speakers, times, locations, and remaining capacity. Perfect for conference agendas and session discovery.

[](/block/event14)

PRO

event14

### Speaker Sessions Schedule

Speaker cards displaying multiple sessions per presenter with times, locations, and session types. Perfect for multi-track conferences with recurring speakers.

[](/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.

[](/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/event27)

PRO

event27

### Breaks and Networking Schedule

Schedule cards for coffee breaks, lunch, and social events with timing, locations, and activity highlights. Perfect for showing networking opportunities.

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