Date Grouped Activity List

FreeNew

An activity feed grouped under Today, Yesterday and dated headings with sticky headings, relative times and an index that jumps between days. Use this when a phone shows a history ordered by time, such as activity, transactions or messages, and people look for a day.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a phone shows a history ordered by time, such as activity, transactions or messages, and people look for a day.

Do not use it for a short list or a feed with no natural days.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/date-grouped-activity-list.json

It composes @tealmac/section-list, which the CLI installs for you.

Usage

import { DateGroupedActivityList } from "@/components/date-grouped-activity-list"

<div className="w-full max-w-sm">
  <DateGroupedActivityList
    className="h-72 rounded-xl border"
    events={events}
    now={now}
  />
</div>

Props

Prop	Type	Default	Description
`events`	`ActivityEvent[]`	`required`	`{ id, title, at: Date }`, newest first.
`now`	`Date`	`new Date()`	The reference time, for tests and server rendering.

Accessibility

Day headings are real headings in labelled sections; the index buttons read "Jump to Today".
Each time is a time element with a full date in dateTime and a title, so the relative text has an exact version.

Testing

The pattern ships with a Testing Library test (date-grouped-activity-list.test.tsx) that drives it through roles and the keyboard.