Filterable Day Agenda

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.

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

Base UI flavor

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

This installs the block to components/beste/block/event95.tsx plus the badge23 and button21 components it uses for the eyebrow and the registration action.

Quick start

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

import { Event95, event95Demo } from "@/components/beste/block/event95";

export default function AgendaPage() {
  return <Event95 {...event95Demo} />;
}

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

import { Event95 } from "@/components/beste/block/event95";

export default function AgendaPage() {
  return (
    <Event95
      badge={{ label: "The agenda" }}
      heading="One day, three tracks, and nothing that is really a sales pitch"
      description="Pick a track to narrow the day."
      dayLabel="Thursday 18 June, Bristol"
      allLabel="Whole day"
      sessions={[
        {
          time: "09:00",
          duration: "30 min",
          track: "Operations",
          title: "The morning huddle, rebuilt",
          description: "What four practices changed about the first fifteen minutes of the day.",
          speaker: "Elena Rourke, Bramble Health",
          room: "Main room",
          href: "/agenda/huddle",
        },
        {
          time: "11:00",
          duration: "60 min",
          track: "Clinical",
          title: "Notes people will actually read",
          description: "Template design from a clinician's side.",
          speaker: "Dr Amelia Frost",
          room: "Main room",
          href: "/agenda/notes",
        },
      ]}
      button={{ label: "Register for the day", href: "/register" }}
    />
  );
}

Props

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

type Session = {
  time: string;
  duration: string;
  track: string;
  title: string;
  description: string;
  speaker: string;
  room: string;
  href: string;
};

Behavior notes

• Tracks are derived, not configured. They come from Array.from(new Set(sessions.map(session => session.track))), so adding a session with a new track adds a pill automatically, in first-appearance order. Counts are computed the same way.
• Sessions are never sorted by the block, so pass them in chronological order. Filtering preserves that order, which is what keeps a filtered track readable as a day.
• The track name repeats inside each row as well as on the pills, which is deliberate: with a filter applied it confirms what you are looking at, and unfiltered it labels each row.
• Rows are whole Link elements laid out as a three-track grid from md: time, session, then speaker and room right-aligned. Below md they stack in that same order.
• Times use tabular-nums, so the left column stays aligned across the day.
• Rows carry md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.
• The registration action sits under its own border-t, which closes the agenda list rather than leaving it open.
• Filter pills are real button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.