Feed

Compact activity list: an outlined mark per event, a rail between them, a timestamp under each. Flush.

Import

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

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

Usage

<Feed 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>
        </>
</Feed>

Props

This component declares no props of its own.

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

Storybook stories

• Default
• Relative Times

Source

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