# Tracker

*Category:* Components
*Section:* Progress
*Source:* https://uikit.developers.rio.cloud/#/components/tracker
*Captured:* 2026-04-27T14:57:49.074Z

Compact visual tracker component for status indicators with optional per-block color and tooltip support.

## Tracker

### Example: Example 1

Default Tracker

Collapse when custom min width is reached, showing last items

Compression without collapsing - overflowing content

#### React (tsx)

```tsx
import Tracker from '@rio-cloud/rio-uikit/Tracker';
import Notification from '@rio-cloud/rio-uikit/Notification';

const data = [
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    {
        id: '12345',
        color: 'bg-danger',
        tooltip: 'Error',
        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
    },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    {
        id: '134565',
        color: 'bg-danger',
        tooltip: 'Error',
        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
    },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    {
        id: '45678',
        color: 'bg-warning',
        tooltip: 'Warn',
        onClick: (id: string) => Notification.info(`Tracker block "${id}" clicked`),
    },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { color: 'bg-gray', tooltip: 'Tracker Info' },
    { color: 'bg-gray', tooltip: 'Tracker Info' },
    { color: 'bg-gray', tooltip: 'Tracker Info' },
    { color: 'bg-gray', tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
    { tooltip: 'Tracker Info' },
];

export default () => (
    <div>
        <div className='margin-bottom-15'>
            <label>Default Tracker</label>
            <Tracker data={data} hoverEffect />
        </div>

        <div className='margin-bottom-15'>
            <label>Collapse when custom min width is reached, showing last items</label>
            <Tracker data={data} hoverEffect minBlockWidth={8} collapseShowLastBlocks />
        </div>

        <div className='margin-bottom-15'>
            <label>Compression without collapsing - overflowing content</label>
            <Tracker data={data} hoverEffect collapseOnMinBlockWidth={false} />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-15">
        <label>Default Tracker</label>
        <div class="tracker" style="gap: 2px;">
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
        </div>
    </div>
    <div class="margin-bottom-15">
        <label>Collapse when custom min width is reached, showing last items</label>
        <div class="tracker" style="gap: 2px;">
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
        </div>
    </div>
    <div class="margin-bottom-15">
        <label>Compression without collapsing - overflowing content</label>
        <div class="tracker" style="gap: 2px;">
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-danger tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Error" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-warning tracker-block-hover cursor-pointer" role="button" tabindex="0" aria-label="Warn" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-gray tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
            <div class="tracker-block bg-success tracker-block-hover" aria-label="Tracker Info" style="width: 10px; min-width: 10px; height: 30px;">
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data | TrackerBlock[] | — | Array of block objects. |
| └id | string | — | Unique identifier for a block. |
| └color | string | — | Defines the block color by setting a UIKIT bg-<name> class. |
| └tooltip | ReactNode | — | Tooltip content shown on hover. |
| └onClick | (id: string) => void | — | Called when clicking the block. |
| └className | string | — | Additional class names for the block. |
| defaultBackgroundColor | string | 'bg-success' | Background color of a block, when no color is provided in data. |
| hoverEffect | boolean | false | Add a hover effect to the tracker blocks. |
| minBlockWidth | number | 5 | Minimum width per tracker block in pixels. The tracker compresses blocks automatically down to this value. |
| maxBlockWidth | number | 10 | Maximum width per tracker block in pixels. |
| blockGap | number | 2 | Gap between tracker blocks in pixels. |
| blockHeight | number | 30 | Height per tracker block in pixels. |
| collapseOnMinBlockWidth | boolean | true | When enabled, the tracker shows fewer blocks once minBlockWidth is reached. |
| collapseShowLastBlocks | boolean | false | Show the last blocks instead of the first blocks when collapsing due to width. |
| className | string | — | Additional class names on the wrapper element. |

### Example: credit score

Credit Score Details

Your credit score is 710
This score is considered to be Excellent.

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Tracker from '@rio-cloud/rio-uikit/Tracker';

const creditScoreData = Array.from({ length: 50 }, (_, index) => ({
    color: index < 40 ? 'bg-success' : 'bg-light',
    tooltip: index < 40 ? 'Good score range' : 'Remaining range',
}));

export const TrackerCreditScoreExample = () => (
    <div className='padding-25 max-width-600'>
        <div className='border rounded-large bg-white padding-20 shadow-default'>
            <div className='display-flex align-items-center justify-content-between gap-10'>
                <div className='display-flex align-items-center gap-10'>
                    <span className='rioglyph rioglyph-dashboard text-size-h2 text-color-gray' />
                    <span className='text-size-h3 text-color-darker'>Credit Score</span>
                </div>
                <Button>Details</Button>
            </div>

            <div className='border border-top-only border-color-lighter margin-y-20' />

            <div className='display-flex align-items-center justify-content-between gap-15 margin-bottom-20'>
                <div>
                    <div className='text-size-18 text-color-darker margin-bottom-5'>
                        Your <strong>credit score</strong> is <strong>710</strong>
                    </div>
                    <div className='text-size-16 text-color-gray'>This score is considered to be Excellent.</div>
                </div>
                <div className='height-60 width-60 rounded-circle bg-lightest display-grid place-items-center flex-0'>
                    <span className='rioglyph rioglyph-face-smile text-color-success text-size-h1' />
                </div>
            </div>

            <Tracker data={creditScoreData} blockHeight={20} minBlockWidth={3} maxBlockWidth={10} blockGap={3} />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="padding-25 max-width-600">
    <div class="border rounded-large bg-white padding-20 shadow-default">
        <div class="display-flex align-items-center justify-content-between gap-10">
            <div class="display-flex align-items-center gap-10">
                <span class="rioglyph rioglyph-dashboard text-size-h2 text-color-gray">
                </span>
                <span class="text-size-h3 text-color-darker">Credit Score</span>
            </div>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Details</button>
        </div>
        <div class="border border-top-only border-color-lighter margin-y-20">
        </div>
        <div class="display-flex align-items-center justify-content-between gap-15 margin-bottom-20">
            <div>
                <div class="text-size-18 text-color-darker margin-bottom-5">Your <strong>credit score</strong> is <strong>710</strong>
                </div>
                <div class="text-size-16 text-color-gray">This score is considered to be Excellent.</div>
            </div>
            <div class="height-60 width-60 rounded-circle bg-lightest display-grid place-items-center flex-0">
                <span class="rioglyph rioglyph-face-smile text-color-success text-size-h1">
                </span>
            </div>
        </div>
        <div class="tracker" style="gap: 3px;">
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-success" aria-label="Good score range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
            <div class="tracker-block bg-light" aria-label="Remaining range" style="width: 7.22px; min-width: 7.22px; height: 20px;">
            </div>
        </div>
    </div>
</div>
```