antuikit's Timeline is Ant Design's Timeline, installed into your project as a file you own. Every prop passes through, and it adds no prop, no default, no styling and no icon. For a row still in progress, pass your own icon: without one, a loading item and the deprecated pending both draw a default spinner that ignores your icon pack. The API tables below have no row marked antuikit.
Install
npx antuikit@latest init
npx antuikit@latest add timeline
The first command installs AntuikitProvider and the kit's theme, and the second adds this component.
Import
From @/components/ui/timeline, not from antd. The file is yours once it is installed, so the import path is a path in your project.
import { Timeline } from "@/components/ui/timeline"
Options
The props that take one of a set of values. They match the Design tab's Figma properties.
mode takes start, end or alternate. The deprecated left and right still work and warn. start and end flip on their own under dir="rtl", and an unknown value falls back to start without a warning.
orientation takes horizontal or vertical, and defaults to vertical.
variant takes outlined (the default) or filled, which sets how the dots are drawn.
titleSpan is the timestamp gutter's width. A number is a column count out of 24 and defaults to 12, so half. A string is a CSS width. A number sized like pixels, say 110, squeezes the content into a sliver. It has no effect with alternate.
Per item, placement takes start or end and overrides mode for that row.
Flags
One on the root, one per item.
reverse shows the items back to front. It reverses the items before rendering, so the page order and the visual order agree and a screen reader hears what the eye sees.
loading on an item marks that row as still running. It replaces the deprecated root-level pending. Pass your own icon beside it, or it draws a default spinner that ignores your icon pack.
An icon from your pack does not spin by itself, so a spinner needs a class for its rotation. Use motion-safe:animate-spin so it stops for readers who ask for less motion.
Slots
The props that take a node. A slot is where your own markup goes, and it comes before a descendant selector. On this component nearly all of them are on the item, not on the root.
content is the row's body and takes anything. Nothing inside it is styled for you, so a button there is a plain button.
title is the gutter node, usually a timestamp. Give any item one and a vertical Timeline switches its whole layout to two columns, so it is a choice about the list, not the row.
icon replaces the dot for one row. The kit sets no default here.
children on the root is the old Timeline.Item form. Timeline.Item is deprecated in favor of items, and the kit leaves it out.
pending and pendingDot on the root add a trailing row. Both are deprecated: put the row in items with loading: true instead.
The old names of the item fields (children for content, label for title, dot for icon, position for placement) still work, and each one warns in development.
Events
Timeline has no event handlers of its own. What it forwards to the element it renders is in the API table below.
Styling
Timeline names its parts, and classNames and styles take the same keys: root, item, itemWrapper, itemIcon, itemSection, itemHeader, itemTitle, itemContent and itemRail. Use a key before a descendant selector. An item takes its own classNames and styles for that one row, and className and style land on the root.