Timeline components

variant="vertical" (the default) is a single column, "alternating" zigzags each entry left and right of a center line, and "horizontal" lays the entries out in a row.

status="completed" is a solid success color, "current" is a solid brand color with a focus ring around it, and "upcoming" (the default) is a dim, outlined circle. Pass an explicit color ("brand", "success", "warning", "error" or "gray") to override the color regardless of status.

You don't need to — the last Timeline.Item in a Timeline hides its own trailing connector automatically via a CSS group-last selector, so adding or removing items never leaves a dangling line.

Yes — pass icon, a component reference like icon={Truck01}, and it renders inside a larger dot instead of a plain filled circle.

Each item's content is rendered on both sides of the center line; only the side matching that item's position (odd/even) is shown, switched purely with CSS so no JavaScript needs to track which side an item falls on.