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

Last updated: 2026-08-12

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. Open Hours Session Rows

# Open Hours Session Rows[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

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

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/event102.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

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

tsxCopy

```
import { Event102, event102Demo } from "@/components/beste/block/event102";

export default function SessionsPage() {
  return <Event102 {...event102Demo} />;
}
```

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

tsxCopy

```
import { Event102 } from "@/components/beste/block/event102";

export default function SessionsPage() {
  return (
    <Event102
      eyebrow="Live sessions"
      heading="Open hours, twice a month"
      description="An hour on a call, and the recording published the same week."
      sessions={[
        {
          day: "26",
          month: "March",
          time: "16:00 CET · 60 min",
          title: "Reading a brief out loud",
          description: "We work through three briefs sent in by readers.",
          status: "12 seats left",
          link: { label: "Save a seat", href: "/sessions/briefs" },
        },
      ]}
      note="Sessions are free."
    />
  );
}
```

### Props

| Prop        | Type        | Default | Description                          |
| ----------- | ----------- | ------- | ------------------------------------ |
| eyebrow     | string      | –       | Badge6 label above the hairline rule |
| heading     | string      | –       | Section heading under the rule       |
| description | string      | –       | Supporting paragraph                 |
| sessions    | Session\[\] | \[\]    | One hairline row per session         |
| note        | string      | –       | Single line under the list           |
| className   | string      | –       | Extra classes for the outer section  |

tsCopy

```
type Session = {
  day: string;
  month: string;
  time: string;
  title: string;
  description: string;
  status?: string;
  link: SessionLink;
};

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

### Behavior notes

* The date is split into `day` and `month` so the day can be set as a figure with the month beside it, which is what makes the left column scannable.
* `status` is free text and optional, so a row can read "12 seats left", "Waiting list" or nothing at all. It is printed after the time on the same line.
* Only the booking link is a link. The row is not clickable, so a reader cannot open a session page by accident when they meant to read the description.
* The row is a three column grid from `md` up and stacks below it, keeping the date, the session and the action in that order either way.

## 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/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/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/event95)

PRO

event95

### Filterable Day Agenda

A conference agenda whose track pills are derived from the sessions and carry live counts, narrowing a timed list of hairline rows that align the slot, the session, and its speaker and room.

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

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