# 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/tour-popover

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/tour-popover?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt