Timeline

A vertical sequence of events with dots, connecting lines, and rich content per node. Each item has semantic variants (success, info, warning, error) that color the dot and surrounding rule.

Order Placed

Your order has been placed successfully.

Processing

We are preparing your order.

Shipped

Your order is on its way.

Delivered

Package has been delivered.

Anatomy

  • Timeline — Outer list.
  • TimelineItem — A single event. variant sets the color.
  • TimelineDot — The marker. Variants: default, filled, outline, icon.
  • TimelineLine — Connector. Variants: default, dashed, dotted.
  • TimelineContent / Header / Title / Time / Description — Content slots.

Installation