Open Hours Session RowsPRO

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.

Installation

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

Base UI flavor

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.

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:

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

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.