GitHub

Tour

A component that displays a tour of the application

Docs API

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/tour.json

Usage

import { 
  Tour, 
  TourTrigger, 
  TourContent, 
  TourHeader,
  TourProgressText,
  TourTitle,
  TourDescription,
  TourFooter,
  TourNextStep,
  TourPreviousStep,
} from "@/components/ui/tour";
<Tour steps={steps}>
  <TourTrigger>Open Tour</TourTrigger>

  <TourContent>
    <TourHeader>
      <TourProgressText />
      <TourTitle />
      <TourDescription />
    </TourHeader>
  </TourContent>

  <TourFooter>
    <TourNextStep />
    <TourPreviousStep />
  </TourFooter>
</Tour>