Featured Session Schedule

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.

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

Base UI flavor

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.

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:

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

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.