A flexible step-by-step product tour component to guide users through your application

Components Layout

import {
  Tour,
  TourArrow,
  TourClose,
  TourDescription,
  TourFooter,
  TourHeader,
  TourNext,
  TourPortal,
  TourPrev,
  TourSkip,
  TourSpotlight,
  TourSpotlightRing,
  TourStep,
  TourStepCounter,
  TourTitle,
} from "kombase";

export default function TourDemo() {
  return (
    <Tour>
      <TourPortal>
        <TourSpotlight />
        <TourSpotlightRing />
        <TourStep>
          <TourArrow />
          <TourClose />
          <TourHeader>
            <TourTitle />
            <TourDescription />
          </TourHeader>
          <TourFooter>
            <TourStepCounter />
            <TourPrev />
            <TourNext />
            <TourSkip />
          </TourFooter>
        </TourStep>
      </TourPortal>
    </Tour>
  );
}