Multi-City Tour DatesPRO

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.

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

Base UI flavor

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

This installs the block to components/beste/block/event98.tsx, the location8 coverage piece it floats on the tile (installed to components/beste/piece/location8.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Event98, event98Demo } from "@/components/beste/block/event98";

export default function TourPage() {
  return <Event98 {...event98Demo} />;
}

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

import { Event98 } from "@/components/beste/block/event98";
import { Location8 } from "@/components/beste/piece/location8";

export default function TourPage() {
  return (
    <Event98
      badge={{ label: "On the road" }}
      heading="Six evenings, six cities, and the same forty chairs"
      description="We bring the roundtable to you. Free, and dinner is included."
      stops={[
        {
          city: "Bristol",
          venue: "The Old Print Works",
          date: "18 June",
          day: "Thursday",
          seats: "12 of 40 left",
          href: "/tour/bristol",
        },
        {
          city: "Leeds",
          venue: "Duke Studios",
          date: "25 June",
          day: "Thursday",
          seats: "Sold out",
          soldOut: true,
          href: "/tour/leeds",
        },
      ]}
      soldOutLabel="Join the waiting list"
      media={
        <Location8
          title="Where we are heading"
          region="Summer 2026"
          sites={[{ name: "Bristol", meta: "18 June", value: "12 left" }]}
          total="6"
          totalLabel="cities, 240 seats in total"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      mediaCaption="If your city is not on the list, tell us and we will add one."
      button={{ label: "Suggest a city", href: "/tour/suggest" }}
    />
  );
}

Props

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

type Stop = {
  city: string;
  venue: string;
  date: string;
  day: string;
  seats: string;
  soldOut?: boolean;
  href: string;
};

Behavior notes

• soldOut mutes the seat count and swaps the call to action to soldOutLabel. The row stays a link either way, since a sold-out stop still needs somewhere to send people.
• The fallback call to action for available stops, "Reserve a seat", is hard-coded in the block rather than being a prop. Only the sold-out variant is configurable.
• seats is free text, so it carries either a count or the words "Sold out". Nothing is parsed, and the soldOut flag is what actually drives the styling.
• Rows are whole Link elements in a three-track grid from md: city and venue, date and day, then seats right-aligned. Below md they stack in that order.
• Rows carry md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.
• The tile column is lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and sticky has nothing to travel within.
• The layout is a 1.7fr to 1fr split, giving the schedule most of the width, which is what lets each stop keep three columns of its own.