TimelineTracking
v1.0.4Updated 28 Sept 2026Large-step milestone tracking timeline (order placed → packed → shipped → delivered) with success and failure states.
Preview
Live · 7 stories▸Why this is recommendedtimelinetrackingmilestonesorder+2
TimelineTracking — order tracking.
- ✓Order tracking
- ✓Delivery progress
- ✓Onboarding milestones
- Large discrete milestone steps
- Per-step icon + timestamp
- Success and failed states
- Vertical or horizontal orientation
- Pass-through props (data-* and the rest) land on the root of EVERY branch — horizontal, vertical, loading skeleton and empty — so an id an e2e or audit tool reads never disappears while the component is busy or has nothing to show. They are spread first, so they cannot overwrite the wiring the component sets itself (data-slot, the state roles, className, style, ref)
- ✕Dense logs (use TimelineAudit)
- ✕Diff / change history (use TimelineHistory)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
milestonesMilestones
yes...propsEvery remaining standard attribute (data-* hooks, id, style, aria-*, ref, handlers) is spread onto the root of whichever branch renders — the ol in both orientations, the loading skeleton and the empty placeholder. The spread goes FIRST, so data-slot, data-orientation and the loading status role can never be clobbered; aria-label stays the one documented exception, where a caller value still wins over labels.trackLabel (fb_5c6ffd6a)
—