# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## activity-feed Activity feed with avatars, rich sentences, inline statuses and live relative times. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add activity-feed` Also adds: avatar, status-icon, use-now, utils, theme ```tsx import { ActivityFeed, ActivityItem, ActivityTarget, ActivityStatus, formatRelativeTime } from "@/components/ui/activity-feed"; ``` ### Example ```tsx import { GitPullRequestIcon } from "lucide-react"; import * as React from "react"; import { ActivityFeed, ActivityItem, ActivityStatus, ActivityTarget } from "@/components/ui/activity-feed"; import { useNow } from "@/lib/use-now"; export default function Demo() { const now = useNow(); return now ? :

; } function Feed({ now }: { now: Date }) { // fixed on first render, so the relative times visibly age const [start] = React.useState(now.getTime()); const ago = (minutes: number) => new Date(start - minutes * 60_000); return ( moved Offline queue for delivery photos from to{" "} commented on Checkout: retry failed card payments } time={ago(60 * 5)}> linked pull request #482 Cart API client set priority of Pricing page design to High created the project Pricing launch ); } ``` ### Source: ui/activity-feed.tsx ```tsx "use client"; import * as React from "react"; import { Avatar } from "@/components/ui/avatar"; import { StatusIcon, statusIconLabels, type StatusIconStatus } from "@/components/ui/status-icon"; import { useNow } from "@/lib/use-now"; import { cn } from "@/lib/utils"; const units: [Intl.RelativeTimeFormatUnit, number][] = [ ["year", 31_536_000], ["month", 2_592_000], ["week", 604_800], ["day", 86_400], ["hour", 3_600], ["minute", 60], ]; /** "just now", "5 minutes ago", "yesterday", "in 2 days". */ function formatRelativeTime(date: Date, now: Date, locale = "en-US") { const seconds = Math.round((date.getTime() - now.getTime()) / 1000); if (Math.abs(seconds) < 45) return "just now"; const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }); for (const [unit, size] of units) { if (Math.abs(seconds) >= size || unit === "minute") return rtf.format(Math.round(seconds / size), unit); } return ""; } /** Vertical feed. Items are joined by a connector line through their avatars. */ function ActivityFeed({ className, ...props }: React.ComponentProps<"ol">) { return

, "content"> & { actor: { name: string; src?: string }; /** The sentence after the actor's name: "moved X from Done to To do". */ children: React.ReactNode; time: Date; /** Replaces the avatar with a small icon bubble, for system events. */ icon?: React.ReactNode; /** Quoted block under the sentence, e.g. a comment body. */ content?: React.ReactNode; locale?: string; }; function ActivityItem({ actor, children, time, icon, content, locale, className, ...props }: ActivityItemProps) { const now = useNow(); return (

{/* connector: from below this avatar to the next one */} {icon ? ( {icon} ) : ( )}

{actor.name} {children} {now && ( {" "} ·{" "} )} {now ? formatRelativeTime(time, now, locale) : null}

{content &&

{content}

}

); } /** Emphasized object in the sentence, e.g. a task title. */ function ActivityTarget({ className, ...props }: React.ComponentProps<"span">) { return ; } /** Inline status with its icon: "from ". */ function ActivityStatus({ status, className, ...props }: React.ComponentProps<"span"> & { status: StatusIconStatus }) { return ( {statusIconLabels[status]} ); } export { ActivityFeed, ActivityItem, ActivityTarget, ActivityStatus, formatRelativeTime, type ActivityItemProps }; ```

Activity feed

Installation

Usage

Activity feed

Installation

Usage