Command Palette

Search for a command to run...

Docs
Tour Popover

Tour Popover

A guided tour popover with steps, progress tracking, and navigation controls.

Loading...

Installation

Usage

import { TourPopover, TourStep } from "@/components/ruixen/tour-popover";
import { Home, Settings, HelpCircle, Keyboard } from "lucide-react";
 
const steps: TourStep[] = [
  {
    icon: Home,
    title: "Dashboard",
    description: "This is your dashboard where you see your project overview.",
  },
  {
    icon: Settings,
    title: "Settings",
    description: "Adjust your preferences and configure your workspace.",
  },
  {
    icon: HelpCircle,
    title: "Support",
    description: "Access our help center and documentation anytime.",
  },
  {
    icon: Keyboard,
    title: "Shortcuts",
    description: "Use shortcuts to navigate faster and improve productivity.",
  },
];
 
export default function App() {
  return (
    <TourPopover
      steps={steps}
      triggerLabel="Take a tour"
      popoverWidth="w-96"
      side="right"
      align="start"
    />
  );
}

Props

PropTypeDefaultDescription
stepsTourStep[]-Array of tour steps
triggerLabelstring"Start tour"Text for the trigger button
popoverWidthstring"w-80"Tailwind width class for popover
side"top" | "bottom" | "left" | "right""bottom"Popover position relative to trigger
align"start" | "center" | "end""center"Popover alignment

TourStep Interface

interface TourStep {
  icon: LucideIcon;
  title: string;
  description: string;
}
PropertyTypeDescription
iconLucideIconLucide React icon component
titlestringStep title
descriptionstringStep description text

Features

  • Step Navigation: Navigate through tour steps with Next/Back buttons
  • Progress Tracking: Visual progress bar shows completion status
  • Icon Support: Each step can have a custom Lucide icon
  • Restart Functionality: Restart tour from the final step
  • Responsive Design: Adapts to different screen sizes
  • Customizable Positioning: Control popover placement and alignment
  • Next Button: Advances to the next step
  • Back Button: Returns to the previous step (hidden on first step)
  • Restart Button: Appears on final step to restart the tour

Progress Calculation

The progress bar automatically calculates completion:

const progress = ((step + 1) / steps.length) * 100;

Customization Examples

Custom Positioning

<TourPopover steps={steps} side="top" align="end" popoverWidth="w-72" />

Custom Trigger

<TourPopover steps={steps} triggerLabel="Get Started" />

Use Cases

  • App Onboarding: Guide new users through key features
  • Feature Introduction: Introduce new features to existing users
  • Dashboard Tours: Explain dashboard sections and functionality
  • Settings Walkthrough: Guide users through configuration options
  • Help System: Provide contextual help and guidance