Back to components
Day Agenda Timeline React component

What is this?

A white day view on a vertical hour axis from 9:00 to 18:00. Each event is placed and sized exactly by its start and end times. Events are plain gray blocks with a small colored dot before the title. A red line with an “11:25” time pill moves to the current time every minute. Click an event and a compact popover springs open just below it, with the time, location, attendee avatars, and Copy link and Join buttons. Click another event and the popover glides over while its content crossfades; click outside or press Escape to close it. Today and the arrows move between days. Swap the days and events, then drop it into a calendar, a scheduling tool, or a dashboard column.

Component

Day Agenda Timeline

A white day view on a vertical hour axis from 9:00 to 18:00. Each event is placed and sized exactly by its start and end times. Events are plain gray blocks with a small colored dot before the title. A red line with an “11:25” time pill moves to the current time every minute. Click an event and a compact popover springs open just below it, with the time, location, attendee avatars, and Copy link and Join buttons. Click another event and the popover glides over while its content crossfades; click outside or press Escape to close it. Today and the arrows move between days. Swap the days and events, then drop it into a calendar, a scheduling tool, or a dashboard column.

Checking access…
Live Preview

Verified Technical Spec

Animation
Framer Motion
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Responsive on phone, tablet, and desktop
  • Finished React · TypeScript · Tailwind CSS · Motion · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0
  • Motion 12.42.2

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Motion
  • Lucide

Version 1.0.0