# Feed

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

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

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

## Import

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-feed--default)
- [Relative Times](/storybook/?path=/story/containers-feed--relative-times)

## Source

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