Agenda Tracks Grid

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<AgendaTracksGrid />

Installation

npx shadcn@latest add https://webberui.com/r/agenda-tracks-grid.json

Usage

Tracks go in through tracks (which determines the columns) and sessions through sessions. Each intersection of a trackId and a start maps to at most one session. The toolbar's track toggles and speaker filter are managed inside the component by default, and can also be driven from outside through controlled props.

import {
  AgendaTracksGrid,
  type AgendaTrack,
  type AgendaSession,
} from "@/components/ui/agenda-tracks-grid";

const tracks: AgendaTrack[] = [
  { id: "keynote", label: "Main stage" },
  { id: "workshop", label: "Workshop" },
];

const sessions: AgendaSession[] = [
  {
    id: "s1",
    trackId: "keynote",
    start: "09:00",
    title: "Opening: animation-first interfaces",
    speaker: "Angela Lin",
    summary: "From first principles: how motion carries an information hierarchy.",
  },
  {
    id: "s2",
    trackId: "workshop",
    start: "09:00",
    title: "Hands-on: building FLIP reflow",
    speaker: "Tzu-Hsuan Chou",
    summary: "Using layout animation to build a grid that reflows the moment it switches.",
  },
];

<AgendaTracksGrid tracks={tracks} sessions={sessions} defaultExpandedId="s1" />

Props

AgendaTrack

AgendaSession

Animation details

• Frozen headers: the timeline column is pinned to the left with sticky left and the track headers to the top with sticky top, with the top-left corner intersection stacked above both; when the columns exceed the container width it scrolls horizontally and the timeline column stays visible throughout.
• FLIP reflow: toggling a track removes a whole column, and filtering by speaker automatically collapses tracks with no matching sessions; exiting session cards are frozen in place by popLayout and fade out while the rest reflow smoothly with layout="position", avoiding text scaling distortion.
• In-place expansion: clicking a session card expands the speaker and summary right where it sits, growing that time row's height while the rows below are pushed down by the same spring; clicking it again or clicking another card collapses it (only one expands at a time).
• Speaker filter: non-matching session cards fade into a disabled state, preserving the time-aligned context.

Accessibility

• When the user has "reduce motion" enabled at the system level, the FLIP, the enter and exit, and the expansion animations are disabled and a switch lands directly; the DOM structure does not change, and the swap only happens after mount to avoid a hydration gap
• The grid uses role="grid" together with aria-rowcount / aria-colcount, with rows and cells marked as columnheader, rowheader, and gridcell and given their matching indexes
• Track toggles are aria-pressed toggle buttons; the speaker filter is a single-select role="radiogroup"; session cards are buttons carrying aria-expanded / aria-controls, and the expanded content is marked role="region"
• Every decorative icon and placeholder is marked aria-hidden, and everything is keyboard focusable with a focus-visible outline