{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Tracker","description":"Display a sequence of status values over time.","url":"https://intentui.com/docs/components/visualizations/tracker","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/visualizations/tracker"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Visualizations","item":"https://intentui.com/docs/components/visualizations"},{"@type":"ListItem","position":5,"name":"Tracker","item":"https://intentui.com/docs/components/visualizations/tracker"}]}]}
Tracker
Loading...
Installation
Add the component with the CLI.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/tracker
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm
pnpm
yarn
bun
npm install react-aria-components cn
Examples
Without tooltip
Disable tooltips when the tracker does not need hover details.
Loading...
Component API
Tracker extends the native <div> element.
classNamestringdataTrackerBlockProps[]Default:
[]defaultBackgroundColorstring