# Agenda List

Day-grouped agenda that follows the clock: past events fade back, the event in progress is highlighted as it runs, and a thin line marks the present moment and moves along with it.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/agenda-list
```

## Import

```tsx
import { relativeDay, AgendaList } from "@/components/ui/agenda-list/agenda-list";
```

## Variants

- `conference` — Conference: `npx @lumioui/cli add pro/agenda-list-conference`
- `schedule` — Schedule: `npx @lumioui/cli add pro/agenda-list-schedule`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `events` | `AgendaEvent[]` | — |
| `days?` | `Date[]` | Days to render, even when empty. Default: every day that has events. |
| `now?` | `Date` | Pin the clock. Default: live, re-read once a minute. |
| `showNowLine?` | `boolean` | Draw the now-line in today's section. Default true. |
| `onEventPress?` | `(event: AgendaEvent) => void` | Row press. |
| `renderTrailing?` | `(event: AgendaEvent) => React.ReactNode` | Trailing node per row (bookmark, owner avatar). |
| `formatDayTitle?` | `(day: Date, now: Date) => string` | Section title. Default: relative day ("Today", "Tomorrow", "Saturday"). |
| `emptyLabel?` | `string` | Empty-day row text. Default "No events". |
| `className?` | `string` | — |

Source: https://lumioui.com/components/agenda-list