Design System/Molecules/Activity Feed

Activity Feed

A vertical timeline of events. Each item has an icon, rich content, and an optional timestamp. Common in audit logs, changelogs, and pipelines.

Molecule

Icon

When To Use

  • Use Activity Feed when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

events, className

Example Code

import { ActivityFeed } from "@hilum/ui"
import type { FeedEvent } from "@hilum/ui"
import { User, Check } from "lucide-react"

const events: FeedEvent[] = [
  {
    id: 1,
    content: <span>Applied to <a className="font-semibold text-ground-900">Front End Developer</a></span>,
    date: "Sep 20",
    icon: <User size={14} />,
    iconBgClass: "bg-ground-200 text-ground-600",
  },
  {
    id: 2,
    content: <span>Phone screening completed with <a className="font-semibold text-ground-900">Martha</a></span>,
    date: "Sep 28",
    icon: <Check size={14} />,
    iconBgClass: "bg-brand-secondary text-ground-900",
// ...trimmed for docs

Activity Feed · Basic

Timeline with icons

Events with colored icon badges and timestamps

Activity Feed · In context

Inside a panel

Embedded in a bordered container

Activity

View all