# FeedEvent

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

Source: https://ui.jcsoftdev.com/docs/components/feed-event

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

## Import

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

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

## Usage

```tsx
<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 | Default | 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

- [Default](/storybook/?path=/story/containers-feed--default)
- [Relative Times](/storybook/?path=/story/containers-feed--relative-times)

## Source

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