Skip to content
Paramanu v0.1.0-alpha.0

Tour

The Tour guides users through interface features with step-by-step popovers, overlays, and spotlight highlighting.

Basic Usage

import { Tour, TourStep, TourOverlay } from "@paramanu/disclosure-react"


export default function App() {
return (
  <Tour open>
    <TourOverlay visible />
    <TourStep placement="bottom" active>
      <h3>Welcome!</h3>
      <p>This is the first step.</p>
    </TourStep>
  </Tour>
)
}
<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">
  <h3>Welcome!</h3>
  <p>This is the first step.</p>
</div>
</div>