# Timeline

> Vertical activity feed: marker rail on the left, grouped by day, newest first by convention.

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

Vertical activity feed: marker rail on the left, grouped by day, newest first by convention.

## Import

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

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

## Usage

```tsx
<Timeline items={items} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `TimelineFeedItem[]` |  |  |

`*` 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-timeline--default)
- [Ungrouped](/storybook/?path=/story/containers-timeline--ungrouped)
- [Narrow](/storybook/?path=/story/containers-timeline--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-timeline--brutal-preset)

## Source

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