TRACKER

<Tracker>tracker.tsx
G2G

Size Variants

Extra Small (xs) - 16px height

Small (sm) - 20px height

Medium (md) - 32px height (default)

Large (lg) - 40px height

Extra Large (xl) - 48px height

Block Width Variants

Extra Narrow - 4px per block

Narrow - 6px per block

Default - 8px per block

Default - xs - 8px per block

Wide - 12px per block

Fill - Flexible width (default)

Gap Width Variants

None - 0px gap

XS - 0.5px gap

SM - 1px gap (default)

MD - 2px gap

LG - 4px gap

Compact Tracker (4-8px blocks)

XS size + Narrow width (16px × 4px)

SM size + Default width (20px × 8px) - Recommended

With Hover Effect

With Data Gaps

Responsive (Different Data at Breakpoints)

Custom Default Background

Data1 (Blue) default background

Brand (Indigo) default background

Data2 (Pink) default background

Status Dashboard Example

API Server99.9% uptime
Database98.5% uptime
CDN100% uptime