Seasonal Gatherings

Event103: Seasonal Gatherings

A season of gatherings as a ruled schedule: each row lines up a serif date, a title and description, the place and how many spaces are left, and a reserve link whose arrow lifts on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/event103.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Event103, event103Demo } from "@/components/beste/block/event103";

export default function Page() {
  return <Event103 {...event103Demo} />;
}

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

import { Event103 } from "@/components/beste/block/event103";

export default function Page() {
  return (
    <Event103
      eyebrow="Gatherings"
      heading="A few days a season, with other people in the room."
      description="Small groups, long silences, no sharing circle unless you want one."
      button={{ label: "All upcoming dates", href: "/events", tone: "outline" }}
      gatherings={[
        {
          day: "14",
          month: "Oct",
          title: "A quiet day",
          description: "Six hours, mostly outdoors, mostly silent.",
          place: "Sintra hills",
          availability: "4 places left",
          href: "/events/quiet-day",
        },
      ]}
      labels={{ reserve: "Reserve a place" }}
    />
  );
}

Props

type Gathering = {
  day: string;
  month: string;
  title: string;
  description: string;
  place: string;
  availability: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The date is two free strings rather than a parsed value, so "14" and "Oct" render exactly as given with no locale surprises and no formatting library.
• The day is set in tabular-nums, so a column of dates stays optically aligned whatever the digits are.
• On a phone the date pair sits on one baseline as 14 Oct; from md it stacks into a serif numeral above its month. The same two strings, two arrangements, no duplicated markup.
• availability is deliberately a free string, so "4 places left", "Waiting list" and "Sold out" all read naturally without the block needing to know about capacity.
• Rows are a real ol with divide-y and a border on both ends, so a schedule stays an ordered list for a screen reader and each added row brings its own rule.
• Every row is a 12-column grid from md, so the date, the copy, the place and the link land on the same vertical rules down the whole list.
• Only the reserve link is clickable, not the whole row, which keeps the description selectable and leaves the arrow as the one obvious target.