What props does TourCard accept?

TourCard is a compound component accepting className and asChild props. Use TourCardHeader, TourCardContent, and TourCardFooter as children.

How do I style the tour card?

Apply CSS classes via className prop, use CSS variables for theming, or use Tailwind utilities. For full control, use HeadlessTourCard with render props.

How do I add navigation buttons to the tour card?

Place TourNavigation inside TourCardFooter. It renders previous/next buttons automatically with disabled states based on step position.

TourCard

TourCard compound component: render step content with header, body, footer sub-components and asChild slot support

The tooltip card that displays step content. Uses compound components for maximum flexibility.

Usage

import {
  TourCard,
  TourCardHeader,
  TourCardContent,
  TourCardFooter,
} from '@tour-kit/react';

<TourCard>
  <TourCardHeader />
  <TourCardContent />
  <TourCardFooter />
</TourCard>

<TourCardHeader>
  <TourClose />
</TourCardHeader>

TourCardContent

Displays the step content.

<TourCardContent className="text-muted-foreground" />

TourCardFooter

Contains navigation and progress.

<TourCardFooter>
  <TourProgress />
  <TourNavigation />
</TourCardFooter>

Complete Example

import {
  Tour,
  TourStep,
  TourCard,
  TourCardHeader,
  TourCardContent,
  TourCardFooter,
  TourProgress,
  TourNavigation,
  TourClose,
  TourOverlay,
} from '@tour-kit/react';

function App() {
  return (
    <Tour id="demo">
      <TourStep target="#btn" title="Welcome" content="Hello world!" />
      <TourStep target="#nav" title="Navigation" content="Explore here." />

      <TourOverlay />

      <TourCard className="w-80">
        <TourCardHeader>
          <TourClose />
        </TourCardHeader>
        <TourCardContent />
        <TourCardFooter>
          <TourProgress />
          <TourNavigation />
        </TourCardFooter>
      </TourCard>

      <MainApp />
    </Tour>
  );
}

Custom Card Layout

<TourCard className="bg-gradient-to-r from-purple-500 to-pink-500 text-white">
  <div className="flex items-start justify-between p-4">
    <div>
      <TourCardHeader className="text-white font-bold" />
      <TourCardContent className="text-white/80 mt-2" />
    </div>
    <TourClose className="text-white hover:bg-white/20" />
  </div>
  <TourCardFooter className="border-t border-white/20 p-4">
    <TourNavigation
      prevLabel="Back"
      nextLabel="Continue"
      completeLabel="Finish"
    />
  </TourCardFooter>
</TourCard>

Without Compound Components

For simpler use cases:

<TourCard>
  {/* Renders default layout with title, content, and navigation */}
</TourCard>

<Tour> — the wrapper <TourCard> must live inside.
<TourNavigation>, <TourProgress>, <TourClose> — the slot components composed inside <TourCardFooter> / <TourCardHeader>.
<TourOverlay> — the spotlight overlay that sits beneath the card.
Headless <TourCard> — render-prop variant for full UI control.
Tailwind styling and CSS variables — restyle the default card.
TourCard migration notes — if you used the pre-compound API.

TourCard

Usage

Props

Compound Components

TourCardHeader

TourCardContent

TourCardFooter

Complete Example

Custom Card Layout

Without Compound Components

Ship onboarding, not config.

On this page