Uptoolkit
GitHub

Activity Feed Group

Date-grouped section header for activity feeds.

Today

  1. Bergen, Norway

    Spent the week redrawing a 1:25000 coastline by hand. The shoreline has moved 40 metres inland since the 1984 survey.

    Every map is a snapshot of a place that has already changed. #cartography #openstreetmap

    Hand-drawn coastline contour map with annotated survey markers
    Comparison overlay of the 1984 and current shoreline
    #cartography#openstreetmap
  2. Tobi Ferrand reacted to a post “Spent the week redrawing a 1:25000 coastline by hand. The s…”
    • Hand-drawn coastline contour map with annotated survey markers
    • Comparison overlay of the 1984 and current shoreline

Installation

npx shadcn@latest add https://ui.uptoolkit.com/r/activity-feed-group.json

Usage

A muted uppercase heading with a trailing rule, wrapping a list of feed entries. Use it inside activity-feed or build your own grouped layout.

import { ActivityFeedGroup } from "@/components/ui/activity-feed-group";
import { ActivityFeedItem } from "@/components/ui/activity-feed-item";

<ActivityFeedGroup label="Today">
  <ol className="m-0 flex list-none flex-col gap-3 p-0">
    {entries.map((entry) => (
      <li key={entry.activity.id}>
        <ActivityFeedItem entry={entry} viewer={viewer} />
      </li>
    ))}
  </ol>
</ActivityFeedGroup>;

The label becomes both the visible heading and the section's aria-label.