Tool Timeline Item

A series of milestones tracking a tool run from accepted through to completed — each with a status icon, a timestamp and a short description.

Loading demo: tool-timeline-item-real-world

Installation

npx sdaia-ui@latest add tool-timeline-item

Usage

import { ToolTimelineItem } from "sdaia-ui"

1<ToolTimelineItem
2  variant="neutral"
3  state="running"
4  timestamp="14:02:12"
5  title="Streaming records"
6  description="Loaded 42 of 80 result chunks · 1.8 s elapsed."
7/>

Examples

Brand

Brand-tinted surface with a brand border — shown across all three milestones.

Loading demo: tool-timeline-item-brand

Neutral

A raised surface with a default border — the quiet default.

Loading demo: tool-timeline-item-neutral

Outline

A transparent surface with a default border.

Loading demo: tool-timeline-item-outline

API Reference

Prop	Type	Default	Required
variant	'brand' \| 'neutral' \| 'outline'	'neutral'	optional
state	'started' \| 'running' \| 'completed'	'started'	optional
title	ReactNode	—	required
description	ReactNode	—	optional
timestamp	ReactNode	—	optional
icon	string	—	optional
showConnector	boolean	true	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
as	ElementType	'div'	optional