Hex UIv1

AppFeed

Chronological activity feed, grouped by day. Each event shows a leading icon on a vertical rail, an actor + message line, optional time, and optional details. Presentational and theme-driven — sort events yourself before passing them in.

Installation

pnpm
pnpm dlx @hex-core/cli add app-feed

Usage

tsx
import { AppFeed } from "@/components/ui/app-feed"

Activity feed grouped by day

Two days of events with actor, message, and time.

tsx
import { AppFeed } from "@hex-core/components";

<AppFeed
  title="Activity"
  groups={[
    {
      date: "Today",
      events: [
        { actor: "Ada Lovelace", message: "merged pull request #42", time: "9:42 AM" },
        { actor: "Alan Turing", message: "commented on issue #18", time: "8:11 AM" },
      ],
    },
    {
      date: "May 21",
      events: [
        { actor: "Grace Hopper", message: "deployed to production", time: "4:55 PM" },
      ],
    },
  ]}
/>

API Reference

PropTypeDefaultDescription
groupsrequired
object—ReadonlyArray<{ date; events: { message; actor?; time?; details?; icon? }[] }>. Day-grouped events; sort newest-first by convention.
eyebrow
ReactNode—Section eyebrow above the title.
title
ReactNode—Section heading.
description
ReactNode—Section subcopy below the heading.
className
string—Additional classes applied to the root wrapper.

AI Guidance

When to use

Use to show recent events: commits, deploys, mentions, audit log entries. Group by day so the rail reads as a timeline. Sort events within a group newest-first; sort groups newest-first too.

When not to use

Don't use for tabular audit logs that need filtering / column sort (use app-data-table). Don't use for navigation lists (use app-stacked-list).

Common mistakes

  • Mixing chronological order — events out of order break the day-grouped affordance.
  • Long detail blocks that dominate the timeline — keep details to ~3 lines or move to a dedicated event detail page.
  • No empty state — render <Empty> when groups is [].

Accessibility

Each group renders an <ol> for the chronological list. Leading icons are aria-hidden — the actor + message text carries the meaning. The vertical rail is purely decorative (border-l) and not announced.

Token budget: 881

Verified against @hex-core/components@1.14.0

Edit this page on GitHub