Timeline
An ordered list of events, each with a marker, a title, content and a time.
- DraftDraft opened for review2026-10-01 09:12
- ChecksAll checks passed2026-10-01 10:40
- ReviewOne reviewer asked for changes2026-10-01 14:05
- DeployDeploy to staging failed2026-10-01 16:30
- ReleaseWaiting on the release window2026-10-02 08:00
Controls
import { Timeline, TimelineContent, TimelineItem, TimelineTime, TimelineTitle } from "raft-ui";
<Timeline>
<TimelineItem variant="success">
<TimelineTitle />
<TimelineContent />
<TimelineTime />
</TimelineItem>
</Timeline>itemPlacement="right" puts the markers on the right and aligns the text to them.
- LeftMarkers on the left09:00
- LeftThe default placement10:00
- RightMarkers on the right09:00
- RightText aligns to the markers10:00
horizontal lays the items out in a row. lineType="dashed" draws a dashed line to the next item.
- Order placedMon
- PackedTue
- ShippedWed
- Out for deliveryThu
icon replaces the dot and takes the variant's color; iconSize sets the marker size for the whole timeline. color gives one item a custom color.
- ShippedAn icon replaces the dot
- In transitIt takes the variant's color
- Custom colorOr a custom color
sizedefault: "md""sm" | "md" | "lg"
Marker and text size.
itemPlacementdefault: "left""left" | "right"
Which side the markers sit on. Ignored when horizontal.
horizontaldefault: falseboolean
Lays the items out in a row; each marker is followed by a line to the next.
iconSizenumber
Marker size in px. Defaults to 9px for a dot and 14px for an icon, at every size.
...propsComponentPropsWithRef<"ol">
Native ordered-list attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Marker and text size. |
itemPlacement | "left" | "right" | "left" | Which side the markers sit on. Ignored when horizontal. |
horizontal | boolean | false | Lays the items out in a row; each marker is followed by a line to the next. |
iconSize | number | — | Marker size in px. Defaults to 9px for a dot and 14px for an icon, at every size. |
...props | ComponentPropsWithRef<"ol"> | — | Native ordered-list attributes. |
variantdefault: "default""default" | "information" | "success" | "warning" | "danger" | "accent"
Marker color role.
colorstring
A custom marker color; overrides variant. Prefer a palette token.
iconReactNode
Replaces the dot marker and takes the variant's color.
lineTypedefault: "solid""solid" | "dashed"
The line from this item to the next.
...propsComponentPropsWithRef<"li">
Native list-item attributes. Children render beside the marker.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "information" | "success" | "warning" | "danger" | "accent" | "default" | Marker color role. |
color | string | — | A custom marker color; overrides variant. Prefer a palette token. |
icon | ReactNode | — | Replaces the dot marker and takes the variant's color. |
lineType | "solid" | "dashed" | "solid" | The line from this item to the next. |
...props | ComponentPropsWithRef<"li"> | — | Native list-item attributes. Children render beside the marker. |
...propsComponentPropsWithRef<"div">
Item title; the marker centers on its first line.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Item title; the marker centers on its first line. |
...propsComponentPropsWithRef<"div">
Item body text.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Item body text. |
...propsComponentPropsWithRef<"div">
Muted time or meta line under the content.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentPropsWithRef<"div"> | — | Muted time or meta line under the content. |