Components
Tour Popover
This Tour Popover component delivers a professional, guided onboarding flow using shadcn/ui’s Popover, Button, Progress, and Separator components. Each step is presented inside a compact popover with a clear icon, title, and description, making the information easy to follow without overwhelming the user. A progress bar at the bottom visually tracks how far along the tour the user is, while navigation controls (Back, Next, Restart) provide a smooth and intuitive way to move through the steps. By using professional Lucide icons like Home, Settings, HelpCircle, and Keyboard, the tour feels polished and business-ready, making it ideal for SaaS dashboards, admin panels, or any app where structured onboarding and contextual guidance are important.
"use client";
import { TourPopover } from "@/components/ui/tour-popover";
function DemoPage() {
return (
<div className="flex min-h-screen items-center justify-center">
<TourPopover />
</div>
);
}
export default DemoPage;
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.