TimelineItem

<ts-timeline-item> vv0.6.3

The ts-timeline-item component.

Open in Storybook for interactive demos.

Preview

<ts-timeline-item variant="primary">Content</ts-timeline-item>

Property	Attribute	Type	Default	Description
`icon`	`icon`	`string \| undefined`	—	Lucide icon name to display inside the dot.
`timestamp`	`timestamp`	`string \| undefined`	—	Timestamp text to display above the content.
`variant`	`variant`	`"danger" \| "neutral" \| "primary" \| "success" \| "warning"`	`'primary'`	The visual variant of the timeline dot.

Name	Description
`(default)`	Default slot for timeline item content.
`dot`	Custom dot content to replace the default dot indicator.

Use ::part() to style internal elements:

Part	Description
`content`	The content wrapper.
`dot`	The dot indicator element.
`line`	The vertical line connecting items.

ts-timeline-item::part(content) {
  /* your custom styles */
}

<ts-timeline-item variant="primary">Content</ts-timeline-item>

import { TsTimelineItem } from '@tessera-ui/react';

<TsTimelineItem variant="primary">Content</TsTimelineItem>