Schedule List

When to use

Reach for ScheduleList when you need a vertical time-anchored list of activities — conference programs, course curricula, podcast / broadcast schedules, meeting agendas, recipe steps with timing. Each row is a time + title + optional description triplet, with optional icons and optional per-row links.

Minimal example

import { ScheduleList } from "@/components/schedule-list";

<ScheduleList
  heading="Program"
  items={[
    { id: "1", time: "09:00", title: "Welcome", description: "Check-in" },
    { id: "2", time: "10:00", endTime: "10:30", title: "Opening Keynote" },
    { id: "3", time: "11:00", title: "Panel: Future Cities" },
  ]}
/>;

Item shape — what's required

• id, time, title — required.
• endTime — optional. When present, time renders as {time}{separator}{endTime} (default separator " - ", configurable via labels.timeRangeSeparator).
• description — optional. Description block omitted when missing.
• icon — optional Lucide-style component (ComponentType<{ className?: string }>). When present, sits left of the time column.
• href — optional. When present + linkComponent provided, the entire row becomes clickable via the overlay-link pattern.

Frame toggle

Default framed: true — each row gets card chrome (bg-card rounded-xl border) and rows are spaced space-y-4. Pass framed={false} for bare rows in dense contexts (sidebars, widgets) — chrome dropped, rows tighten to space-y-2.

Custom rendering

• renderItem(item) — bypass the default row layout entirely. Useful for embedding speaker avatars, status badges, per-item actions.
• renderTime(item)— bypass the default time string renderer (e.g. transform "09:00" → "9:00 AM"). Used inside the default row layout when renderItem is not supplied.

Polymorphic root

import NextLink from "next/link";

<ScheduleList
  heading="Conference Day 1"
  items={items.map((item) => ({ ...item, href: `/talks/${item.id}` }))}
  linkComponent={NextLink}
/>;

Empty state

When items is empty, the component renders emptyState (if provided) OR a <p role="status"> with labels.emptyText(default "No items scheduled.").

Notes

• Renders semantic <ol role="list"> — schedules ARE ordered.
• Section aria-labelledby resolves to the heading id (computed via useId) — only when heading is supplied.
• Decorative icons get aria-hidden="true"; link's accessible name is the item title.
• All hover transitions gated via motion-safe: — reduced-motion users see static rows.