FeedEvent

Live preview

Loading example…

FeedEvent is part of the Containers set, imported from @jcsoftdev/ui/containers.

Import

import { FeedEvent } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/feed.

Usage

<FeedEvent aria-label="Activity">
  <>
          <FeedEvent icon={<Plus />} time="2026-03-04T15:30:00Z" timeZone="UTC" meta="Ana">
            <b>Enrolment</b> created
          </FeedEvent>
          <FeedEvent icon={<Pencil />} time="2026-03-03" meta="Luis">
            <b>Grades</b> updated
          </FeedEvent>
          <FeedEvent time="2026-03-02T09:00:00Z" timeLabel="Mar 2, morning">
            Attendance closed
          </FeedEvent>
        </>
</FeedEvent>

Props

Prop	Type	Description
`icon`	`ReactNode`	Decorative glyph inside the mark (`aria-hidden`). Without it the mark is a dot.
`time`	`string \| Date`	When it happened: an ISO instant (`2026-03-04T15:30:00Z`), a calendar date (`2026-03-04`) or a `Date`. Rendered as `<time datetime>` and formatted with the locale of the UI strings.
`timeLabel`	`ReactNode`	Replaces the formatted `time` text (the machine value stays on `datetime`).
`meta`	`ReactNode`	Extra line under the text, after the time (an actor, a place).
`classNames`	`Partial<Record<FeedEventPart, string>>`	Per-part classes merged with `cn`; consumer classes win. `className` still targets the item.
`locale`	`string`
`timeZone`	`string`	IANA zone used to show an instant (default: the viewer’s). Calendar dates never use a zone.
`relative`	`boolean`	Show “5 minutes ago” for instants within a week of `now` instead of the absolute time.
`now`	`string \| number \| Date`	Reference instant for `relative` (default: the current time).

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

Source

packages/ui/src/containers/feed/feed.tsx