TourProgress

TourProgress component: step counter and progress bar showing current position and total steps in the tour

Displays the current progress through the tour.

Usage

import { TourProgress } from '@tour-kit/react';

<TourProgress />

Props

Prop

Type

Variants

Variant	Renders	Role / a11y
`text`	`"<current> of <total>"` text	`role="status"`
`narrow`	thin progress bar (`h-0.5 w-12`)	`role="progressbar"` + `aria-valuenow/min/max`
`bar`	progress bar (`h-1.5 w-20`)	`role="progressbar"` + `aria-valuenow/min/max`
`chain`	N connected segments, completed/active filled	`role="progressbar"` + `aria-valuenow/min/max`
`dots`	one dot per step, current highlighted	`role="group"` + per-dot `aria-current`
`numbered`	`"<current> / <total>"` chip	`role="progressbar"` + `aria-valuenow/min/max`
`none`	renders `null`	n/a

Text

<TourProgress variant="text" />
// Renders: "1 of 5"

Narrow

<TourProgress variant="narrow" />
// Renders: thin filled progress bar

Dots (Default)

<TourProgress variant="dots" />
// Renders: ● ○ ○ ○ ○

Bar

<TourProgress variant="bar" />
// Renders: [====    ] 40%

Chain

<TourProgress variant="chain" />
// Renders: ▰ ▰ ▰ ▱ ▱  (segments completed → active → pending)

Numbered

<TourProgress variant="numbered" />
// Renders: "2 / 5"

None

<TourProgress variant="none" />
// Renders nothing — useful for compound layouts that only sometimes show progress

Custom Format

<TourProgress
  variant="text"
  format={(current, total) => `${current}/${total}`}
/>
// Renders: "1/5"

<TourProgress
  variant="text"
  format={(current, total) => `Step ${current} • ${total} total`}
/>
// Renders: "Step 1 • 5 total"

Styling Dots

<TourProgress
  variant="dots"
  className="gap-2"
/>

/* Custom dot styles */
.tour-progress-dot {
  @apply w-2 h-2 rounded-full bg-gray-300;
}

.tour-progress-dot[data-active="true"] {
  @apply bg-blue-500;
}

.tour-progress-dot[data-completed="true"] {
  @apply bg-green-500;
}

Progress Bar Styling

<TourProgress
  variant="bar"
  className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden"
/>

.tour-progress-bar {
  @apply h-full bg-blue-500 transition-all duration-300;
}

In Card Footer

<TourCardFooter className="flex items-center justify-between">
  <TourProgress variant="dots" />
  <TourNavigation />
</TourCardFooter>

Custom Progress Component

import { useTour } from '@tour-kit/react';

function CustomProgress() {
  const { currentStepIndex, totalSteps } = useTour('my-tour');
  const percentage = ((currentStepIndex + 1) / totalSteps) * 100;

  return (
    <div className="flex items-center gap-3">
      <div className="w-24 h-1.5 bg-gray-200 rounded-full">
        <div
          className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
          style={{ width: `${percentage}%` }}
        />
      </div>
      <span className="text-sm text-muted-foreground">
        {currentStepIndex + 1} of {totalSteps}
      </span>
    </div>
  );
}

TourProgress

On this page