# antuikit / Timeline

> Timeline, with a `shape`, `size` and `variant` that put each item's icon in a box, and every preset and palette name accepted as an item `color`.

Docs: https://antuikit.com/docs/components/timeline

## Install

npx antuikit@latest init
npx antuikit@latest add timeline

## Import

import { Timeline } from "@/components/ui/timeline";

## Demos

- [Basic](https://ui.antuikit.com/embed/timeline/basic.md): Pass `items` with a `content` for each event, and Timeline draws them in order down a rail with a dot for each.
- [Color](https://ui.antuikit.com/embed/timeline/color.md): Set an item's `color` to a color name like `blue` or `violet`, or any CSS color.
- [Variant](https://ui.antuikit.com/embed/timeline/variant.md): Set `variant` to `filled` to draw each dot as a solid circle instead of the default `outlined` ring.
- [Icons](https://ui.antuikit.com/embed/timeline/custom-dot.md): Pass an item's `icon` to replace its dot, like a check for a passed build or a spinner for one still running.
- [Shape](https://ui.antuikit.com/embed/timeline/shape.md): Set `shape` to `circle`, `square` or `squircle` to put each item's `icon` in a box, colored by the item's `color`.
- [Size](https://ui.antuikit.com/embed/timeline/size.md): Set `size="small"` to draw the `shape` boxes smaller, for a dense feed or a sidebar.
- [Box variant](https://ui.antuikit.com/embed/timeline/shape-variant.md): With a `shape`, set `variant` to `outlined`, `filled` or `solid` to draw the box as a surface, a tint of the item's `color` or that color in full.
- [Alternate mode](https://ui.antuikit.com/embed/timeline/mode-and-placement.md): Set `mode="alternate"` to put each `title` and `content` on opposite sides, and `placement` on one item to move that row.
- [End mode](https://ui.antuikit.com/embed/timeline/mode-end.md): Set `mode="end"` to move the rail to the end side, with the content before it, which flips in a right-to-left layout.
- [Orientation](https://ui.antuikit.com/embed/timeline/orientation.md): Set `orientation="horizontal"` to lay the items out in a row, like the steps of a checkout.
- [Shape in a row](https://ui.antuikit.com/embed/timeline/horizontal-shape.md): Combine `orientation="horizontal"` with `shape` to draw each step of a checkout as a box on the rail.
- [Title span](https://ui.antuikit.com/embed/timeline/title-span.md): Set `titleSpan` to size the column the titles sit in, as a column count out of 24 or as a CSS width string.
- [Loading item](https://ui.antuikit.com/embed/timeline/loading-and-reverse.md): Set `loading` on an item to mark it in progress, and give it a spinning `icon` so the spinner comes from your icon pack.
- [Reverse](https://ui.antuikit.com/embed/timeline/reverse.md): Set `reverse` to show the items in the opposite order without changing the array, like an invoice history shown newest first.
- [Agent run trace](https://ui.antuikit.com/embed/timeline/agent-run-trace.md): An agent's run log with each tool call as an item, a `Tag` for the tool name, and a failed call followed by its retry.
- [LLM conversation](https://ui.antuikit.com/embed/timeline/llm-conversation.md): A chat history in `mode="alternate"`, with the speaker in `title` on one side and what they said in `content` on the other.
- [Moderation pipeline](https://ui.antuikit.com/embed/timeline/moderation-pipeline.md): A moderation pipeline where each item's `color` shows the verdict at that stage, from gray while queued to green once cleared.
- [Project roadmap](https://ui.antuikit.com/embed/timeline/project-roadmap.md): A roadmap in `mode="alternate"`, with a date in each `title` and a milestone card with its team in each `content`.
- [Audit log](https://ui.antuikit.com/embed/timeline/audit-security-log.md): An audit log where routine entries stay gray and the one blocked sign-in is marked with `color="red"`.
- [Approval workflow](https://ui.antuikit.com/embed/timeline/approval-workflow.md): An approval flow with a blocked step that has a warning `icon`, how long it has waited and buttons to act on it.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/timeline`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Timeline` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.