The Tour guides users through interface features with step-by-step popovers, overlays, and spotlight highlighting.
Basic Usage
Welcome!
This is the first step.
import { Tour, TourStep, TourOverlay } from "@paramanu/disclosure-react"
export default function App() {
<TourStep placement="bottom" active>
<p>This is the first step.</p>
<div class="pm-tour pm-tour--open">
<div class="pm-tour__overlay pm-tour__overlay--visible" aria-hidden="true"></div>
<div class="pm-tour__step pm-tour__step--bottom pm-tour__step--default pm-tour__step--active" role="dialog">
<p>This is the first step.</p>
Accessibility
| Key | Action |
|---|
Tab | Move between tour controls |
Escape | Close the tour |
Enter | Advance to next step |
- Tour steps use
role="dialog".
- Overlay uses
aria-hidden="true".
- Focus should be trapped within the active step.
Best Practices
- Keep tour steps concise and focused.
- Limit tours to 5-7 steps maximum.
- Provide a way to skip or close the tour at any point.
Tour Props
| Prop | Type | Default | Description |
|---|
open | boolean | false | Tour visibility |
TourStep Props
| Prop | Type | Default | Description |
|---|
placement | "top" | "bottom" | "left" | "right" | ... | "bottom" | Step placement |
active | boolean | false | Active step |
variant | "default" | "primary" | "default" | Visual variant |
TourOverlay Props
| Prop | Type | Default | Description |
|---|
visible | boolean | false | Overlay visibility |
CSS Classes
| Class | Description |
|---|
pm-tour | Root element |
pm-tour--open | Open state |
pm-tour__step | Step popover |
pm-tour__step--active | Active step |
pm-tour__overlay | Background overlay |
pm-tour__spotlight | Target highlight |