Hi everyone! Iβm excited to present Tour, our new component designed to guide visitors through your Elements projects.
Tour turns your page into a guided walkthrough
Options and Features
You can use also your
keyboard β β β β or space bar to navigate (esc to quit)
This component is extremely versatile and features a dual purpose: it can be used either as a sequential multi-step guided tour, perfect for onboarding and walkthroughs, or as a standalone tool to target and highlight a single object, as you can see in the Multi-Target page
Jump to the banner:
Thanks to a spotlight effect that dims the background and flexible positioning controls, it allows you to instantly capture the userβs attention right where you want it.
Jump to the promo:
Key features:
- Dual Mode: Use it as a multi-step guided tour or as a focused spotlight on a single element.
- Advanced Spotlight: Elegantly dims the background to focus attention on the active target.
- Flexible Positioning: Advanced placement controls for tooltips and cards (top, bottom, left, right, auto-fit).
- Interactive Controls: Smooth navigation with Next, Back, Skip, and custom finish actions.
- Custom Drop Zones: Easily embed images, icons, or custom Elements inside the tour boxes.
- Accessibility: Built-in keyboard navigation and focus management support.
- Tailwind Native: Full support for Tailwind utility classes for advanced styling without limits.
- Responsive Controls: Fine-tune visibility and layout behavior across every breakpoint. ..and much more!
- β β β β or space bar to navigate
List of use cases:
- User Onboarding: Step-by-step walkthroughs for new sign-ups, introducing core dashboard features.
- Layout & Interface Tours: Explaining complex website structures, navigation menus, or editorial layouts.
- Feature Highlights: Spotlighting new updates or hidden tools when users log in after a release.
- E-Commerce & Product Discovery: Pointing out crucial details (e.g., size guides, discounts, or configuration options) via single-target highlights.
- Guided Form Completion: Helping users navigate multi-step checkouts or lengthy application forms with contextual tooltips.
- Interactive E-Learning: Guiding students through digital learning tools, platform controls, or interactive modules.
- Contextual Help & Support: Replacing static FAQ pages with an on-page tour that solves common user questions instantly. DEMO with Franck

Rverything you see in the demos is included with the component: you can open the demo project, explore the different configurations, and integrate them directly into your work. Once installed, you will find the demo project in the available projects panel when creating a new one (expand the list with βview allβ, See all library items).
Compatibility note: TOUR is fully compatible with Elements V3 and includes all updates required for Tailwind 4.
Available in the marketplace Now in promo! ![]()
Let me know what you think, and happy building ![]()
thanks !


