timeline

Vertical event feed with a connector line and tone-coded dots.

Compose TimelineItems inside Timeline. Each item shows a dot (a coloured default, or your own via dot) with the connector threading between them; tone colours the dot.

import { Timeline, TimelineItem } from '@fluixi-ui/timeline';

<Timeline>
  <TimelineItem tone="success"><strong>Paid</strong><div>2 Jun, 14:30</div></TimelineItem>
  <TimelineItem tone="primary"><strong>Fulfilled</strong><div>3 Jun, 09:12</div></TimelineItem>
  <TimelineItem dot={<TruckIcon />}>Shipped</TimelineItem>
</Timeline>

tone accepts neutral | primary | info | success | warning | danger. Styled via the data-timeline, data-timeline-item, data-timeline-indicator and data-timeline-content hooks.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.