Tour

<quiet-tour>

stable

since 6.0

Guides users through an interface one step at a time, highlighting elements and showing contextual content beside them. Use a tour for onboarding, feature announcements, and in-context help.

Each step highlights an element on the page and shows a popover with contextual content beside it. Add a <quiet-tour-item> for each step, point it at an element with the for attribute, and slot in your content along with navigation buttons. The buttons can be wired up with data attribute invokers, so you don't have to write any JavaScript to get them working.

This tour walks through the actual page around you. Each step points at a real element, including ones that demonstrate how the tour automatically scrolls to highlight off-screen targets.

Welcome to Quiet UI

Let's take a quick walk around the page. This logo always brings you back home.

Start the tour

Search

Looking for something specific? Open search from here or press from anywhere.

Back

Light & dark

Toggle between light and dark mode with this button. Your preference is remembered.

Back

Pick a color

Choose a primary color to theme the entire site. Try a few…it's easy to switch!

Back

Browse the docs

Every component and guide lives in this sidebar. Scroll it independently from the page.

Back

Live examples

Every component page is full of working examples like this one. Tinker with the code to see how each piece fits together.

Back

Keyboard friendly

Most components can be driven entirely from the keyboard. Look for a section like this one to learn their shortcuts.

Back

Tour complete

That's the grand tour! Poke around, build something, and enjoy the quiet. Good luck!

Start over

Finish

Take the page tour

<div id="tour__overview">
  <quiet-tour light-dismiss with-steps id="tour__overview-tour">
    <quiet-tour-item for="header-logo" placement="bottom-start">
      <h4>Welcome to Quiet UI</h4>
      <p>Let's take a quick walk around the page. This logo always brings you back home.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Start the tour</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="header-search-button">
      <h4>Search</h4>
      <p>Looking for something specific? Open search from here or press <quiet-hotkey keys="$cmdctrl K"></quiet-hotkey> from anywhere.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="header-theme-button">
      <h4>Light & dark</h4>
      <p>Toggle between light and dark mode with this button. Your preference is remembered.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="header-color-picker" placement="bottom-end">
      <h4>Pick a color</h4>
      <p>Choose a primary color to theme the entire site. Try a few…it's easy to switch!</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="sidebar" placement="right">
      <h4>Browse the docs</h4>
      <p>Every component and guide lives in this sidebar. Scroll it independently from the page.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="examples" placement="bottom-start">
      <h4>Live examples</h4>
      <p>Every component page is full of working examples like this one. Tinker with the code to see how each piece fits together.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="keyboard-support" placement="top">
      <h4>Keyboard friendly</h4>
      <p>Most components can be driven entirely from the keyboard. Look for a section like this one to learn their shortcuts.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item>
      <h4>Tour complete</h4>
      <p>That's the grand tour! Poke around, build something, and enjoy the quiet. Good luck!</p>
      <quiet-button slot="actions" data-tour="start">Start over</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__overview-tour">
    <quiet-icon slot="start" name="map-pin"></quiet-icon>
    Take the page tour
  </quiet-button>
</div>

Examples Jump to heading

Tour basics Jump to heading

A tour is made up of steps, and each step is a <quiet-tour-item> placed inside a single <quiet-tour>. The order of the items is the order the steps will appear in.

The tour is most easily controlled with data attribute invokers, which let you declare what a button does right in the markup instead of wiring up click handlers with JavaScript. To let users move through the tour, put buttons in the tour items' actions slots and give each one a data-tour attribute. Its value is an action, followed by the ID of the tour it controls.

For example, this button will start the tour:

<quiet-tour id="my-tour">
  ...
</quiet-tour>

<quiet-button slot="actions" data-tour="start my-tour">Start</quiet-button>

The ID is optional when the button lives inside the tour. These buttons will move to the previous and next steps in the tour.

<quiet-tour>
  <quiet-tour-item>
    ...
    <quiet-button slot="actions" data-tour="previous">Previous</quiet-button>
    <quiet-button slot="actions" data-tour="next">Next</quiet-button>
  </quiet-tour-item>

  ...
</quiet-tour>

Available actions to control the tour include:

Action	What it does
`start`	Opens the tour at its first step.
`next`	Advances to the next step. Ends the tour if called on the last step.
`previous`	Returns to the previous step.
`stop`	Ends the tour.

Adding steps Jump to heading

Point a step at the element it should highlight with the for attribute, setting it to that element's id. The target must live in the same document as the tour. Inside the item, add the content the user will read. This is typically a short heading followed by a description.

<quiet-tour id="my-tour">
  <quiet-tour-item for="step-1">
    <h4>Step one</h4>
    <p>A short description of this feature.</p>
    <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
  </quiet-tour-item>

  <!-- more steps -->
</quiet-tour>

Here is a minimal example that steps through three boxes.

Welcome

This is the first stop on our tour.

Keep going

Here's the second thing worth knowing about.

Back

All done

That's everything! Thanks for taking the tour.

Back

Finish

Start the tour

<div id="tour__basics">
  <!-- These are the boxes we'll use for the demo -->
  <div class="tour__boxes">
    <div id="tour__box-1" class="tour__box" style="background-color: #4b97f4;">1</div>
    <div id="tour__box-2" class="tour__box" style="background-color: #48b873;">2</div>
    <div id="tour__box-3" class="tour__box" style="background-color: #e468b0;">3</div>
  </div>

  <!-- The tour element -->
  <quiet-tour with-steps id="tour__basics-tour">
    <!-- First popover -->
    <quiet-tour-item for="tour__box-1">
      <h4>Welcome</h4>
      <p>This is the first stop on our tour.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <!-- Second popover -->
    <quiet-tour-item for="tour__box-2">
      <h4>Keep going</h4>
      <p>Here's the second thing worth knowing about.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <!-- Third popover -->
    <quiet-tour-item for="tour__box-3">
      <h4>All done</h4>
      <p>That's everything! Thanks for taking the tour.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__basics-tour">Start the tour</quiet-button>
</div>

<style>
  #tour__basics {
    .tour__boxes {
      display: flex;
      gap: 1rem;
      margin-block-end: 1.5rem;
    }

    .tour__box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      border-radius: var(--quiet-border-radius-md);
      color: white;
    }
  }
</style>

If the for attribute is omitted, the step will show as a centered popover instead of attached to an element. This is useful for welcome and closing steps that introduce or wrap up the tour without pointing to a specific element.

When a step appears, screen readers announce its accessible name, the user's position (e.g. "Step 2 of 5"), and the step's body text. The accessible name comes from the step's first heading by default. When a step has no heading, or its heading doesn't make a good spoken label, set the label attribute to provide one.

<quiet-tour-item for="avatar" label="Your profile photo">
  <p>Upload a photo so teammates can recognize you.</p>
  <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
</quiet-tour-item>

Highlighting a single element Jump to heading

A tour doesn't have to be a multi-step walkthrough. A single <quiet-tour-item> works well for contextual help, like explaining a metric on a dashboard or pointing out a feature on demand. Just slot in your content and a button to dismiss it.

Monthly active users 12,480

Monthly active users

This counts the unique people who opened your app at least once in the past 30 days. It refreshes every few hours.

Got it

<div id="tour__single">
  <div id="tour__single-stat">
    <span>
      <small>Monthly active users</small>
      <strong>12,480</strong>
    </span>
    <quiet-button appearance="text" icon-label="What's this?" data-tour="start tour__single-tour">
      <quiet-icon name="help-circle"></quiet-icon>
    </quiet-button>
  </div>

  <quiet-tour id="tour__single-tour" light-dismiss>
    <quiet-tour-item for="tour__single-stat" placement="bottom-start">
      <h4>Monthly active users</h4>
      <p>This counts the unique people who opened your app at least once in the past 30 days. It refreshes every few hours.</p>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Got it</quiet-button>
    </quiet-tour-item>
  </quiet-tour>
</div>

<style>
  #tour__single {
    #tour__single-stat {
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border: var(--quiet-border-style) var(--quiet-border-width) var(--quiet-neutral-stroke-softer);
      border-radius: var(--quiet-border-radius-md);

      span {
        display: flex;
        flex-direction: column;
      }

      small {
        color: var(--quiet-text-muted);
      }

      strong {
        font-size: 1.5rem;
      }
    }
  }
</style>

Starting and stopping a tour Jump to heading

Add data-tour="action id" to any button to control a tour, where action is one of start, stop, next, or previous. The id is only required if the button lives outside the tour.

<!-- Outside the tour: include the tour's id -->
<quiet-tour id="my-tour">...</quiet-tour>
<quiet-button data-tour="start my-tour">Start</quiet-button>

<!-- Inside the tour: the id is optional -->
<quiet-tour>
  ...
  <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
  <quiet-button slot="actions" data-tour="next">Next</quiet-button>
  <quiet-button slot="actions" data-tour="stop">Finish</quiet-button>
</quiet-tour>

You can also control a tour from JavaScript. Call start() to begin (optionally passing a step name or index), next() and previous() to move between steps, goTo() to jump straight to a specific step, and stop() to end the tour.

Setting the placement Jump to heading

By default, a step's popover appears below the highlighted element. Use the placement attribute on a <quiet-tour-item> to position it elsewhere. The popover shifts to a more optimal location when the preferred placement doesn't have enough room.

Top

This popover sits above the element.

Right

This one sits to the side.

Back

Bottom

And this one returns below, the default.

Back

Finish

Start the tour

<div id="tour__placement">
  <div id="tour__placement-box" class="tour__box" style="background-color: #4b97f4;"></div>

  <quiet-tour id="tour__placement-tour">
    <quiet-tour-item for="tour__placement-box" placement="top">
      <h4>Top</h4>
      <p>This popover sits above the element.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__placement-box" placement="right">
      <h4>Right</h4>
      <p>This one sits to the side.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__placement-box" placement="bottom">
      <h4>Bottom</h4>
      <p>And this one returns below, the default.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__placement-tour">Start the tour</quiet-button>
</div>

<style>
  #tour__placement {
    .tour__box {
      width: 100px;
      height: 100px;
      border-radius: var(--quiet-border-radius-md);
      margin-block-end: 2rem;
    }
  }
</style>

Centering a step Jump to heading

Omit the for attribute to create a step that isn't tied to any element. The spotlight dims the whole page and the popover sits centered in the viewport, which is ideal for a welcome or wrap-up step.

Welcome aboard

Let's take a quick look around. This step isn't tied to anything, so it's centered on the page.

Here's the good stuff

And this step highlights an element like usual.

Back

Finish

Start the tour

<div id="tour__centered">
  <div id="tour__centered-box" class="tour__box" style="background-color: #48b873;"></div>

  <quiet-tour id="tour__centered-tour">
    <quiet-tour-item>
      <h4>Welcome aboard</h4>
      <p>Let's take a quick look around. This step isn't tied to anything, so it's centered on the page.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__centered-box">
      <h4>Here's the good stuff</h4>
      <p>And this step highlights an element like usual.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__centered-tour">Start the tour</quiet-button>
</div>

<style>
  #tour__centered {
    .tour__box {
      width: 100px;
      height: 100px;
      border-radius: var(--quiet-border-radius-md);
      margin-block-end: 2rem;
    }
  }
</style>

Highlighting without a spotlight Jump to heading

By default, the tour dims the page around the highlighted element with a spotlight. Add the without-spotlight attribute to highlight with the popover alone, leaving the rest of the page interactive. Pairs well with light-dismiss.

No dimming

The rest of the page stays bright and interactive.

Just the popover

Only the popover points the way.

Back

That's a wrap

With no for attribute, this step centers itself on the page to close things out.

Back

Finish

Start the tour

<div id="tour__no-spotlight">
  <div class="tour__boxes">
    <div id="tour__no-spotlight-box-1" class="tour__box" style="background-color: #4b97f4;">1</div>
    <div id="tour__no-spotlight-box-2" class="tour__box" style="background-color: #48b873;">2</div>
  </div>

  <quiet-tour id="tour__no-spotlight-tour" without-spotlight light-dismiss>
    <quiet-tour-item for="tour__no-spotlight-box-1">
      <h4>No dimming</h4>
      <p>The rest of the page stays bright and interactive.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__no-spotlight-box-2">
      <h4>Just the popover</h4>
      <p>Only the popover points the way.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item>
      <h4>That's a wrap</h4>
      <p>With no <code>for</code> attribute, this step centers itself on the page to close things out.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__no-spotlight-tour">Start the tour</quiet-button>
</div>

<style>
  #tour__no-spotlight {
    .tour__boxes {
      display: flex;
      gap: 1rem;
      margin-block-end: 1.5rem;
    }

    .tour__box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      border-radius: var(--quiet-border-radius-md);
      color: white;
    }
  }
</style>

Showing a step counter Jump to heading

Add the with-steps attribute to the tour to show a "Step X of Y" counter beside each step's actions. The counter is translated automatically and sits at the start of the actions row, pushing the buttons to the end. Style it with the step-counter CSS part.

First things first

Watch the counter beside the buttons to see how far along you are.

Halfway there

The counter updates with every step.

Back

Last stop

And that's the end of the tour. Thanks for visiting!

Back

Finish

Start the tour

<div id="tour__counter">
  <div class="tour__boxes">
    <div id="tour__counter-box-1" class="tour__box" style="background-color: #937cfb;">1</div>
    <div id="tour__counter-box-2" class="tour__box" style="background-color: #e468b0;">2</div>
    <div id="tour__counter-box-3" class="tour__box" style="background-color: #20b9bd;">3</div>
  </div>

  <quiet-tour id="tour__counter-tour" with-steps>
    <quiet-tour-item for="tour__counter-box-1">
      <h4>First things first</h4>
      <p>Watch the counter beside the buttons to see how far along you are.</p>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__counter-box-2">
      <h4>Halfway there</h4>
      <p>The counter updates with every step.</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="next">Next</quiet-button>
    </quiet-tour-item>

    <quiet-tour-item for="tour__counter-box-3">
      <h4>Last stop</h4>
      <p>And that's the end of the tour. Thanks for visiting!</p>
      <quiet-button slot="actions" data-tour="previous">Back</quiet-button>
      <quiet-button slot="actions" variant="primary" data-tour="stop">Finish</quiet-button>
    </quiet-tour-item>
  </quiet-tour>

  <quiet-button data-tour="start tour__counter-tour">Start the tour</quiet-button>
</div>

<style>
  #tour__counter {
    .tour__boxes {
      display: flex;
      gap: 1rem;
      margin-block-end: 1.5rem;
    }

    .tour__box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      font-size: 1.5rem;
      font-weight: var(--quiet-font-weight-semibold);
      border-radius: var(--quiet-border-radius-md);
      color: white;
    }
  }
</style>

Light dismissal Jump to heading

The tour stays open until the user finishes or presses Escape. Add the light-dismiss attribute to also let users stop the tour by clicking anywhere outside of it.

<quiet-tour light-dismiss>
  <!-- steps -->
</quiet-tour>

Controlling the tour programmatically Jump to heading

In addition to data-tour invokers, you can drive a tour in script with the start(), stop(), next(), previous(), and goTo() methods.

const tour = document.querySelector('#my-tour');

tour.start(); // start from the first step
tour.next(); // advance one step
tour.goTo('billing'); // jump to a named step
tour.stop(); // end the tour

Naming steps Jump to heading

Add the name attribute to a step so you can jump to it by name with goTo() or start(). The tour's active-name property always reflects the current step's name.

<quiet-tour-item for="profile" name="profile">…</quiet-tour-item>

tour.goTo('profile');

Responding to changes Jump to heading

The tour emits events throughout its lifecycle so you can gate behavior, run side effects, and track progress.

quiet-before-open fires when the tour is asked to start but before anything is shown. It's cancelable, so calling event.preventDefault() stops the tour from starting. This is a good place to skip a tour the user has already completed.

const tour = document.querySelector('#my-tour');

tour.addEventListener('quiet-before-open', event => {
  if (localStorage.getItem('tour-completed')) {
    event.preventDefault();
  }
});

quiet-open fires once the tour has started and the first step is visible. Use it for analytics or to pause background activity while the tour runs.

tour.addEventListener('quiet-open', () => {
  analytics.track('tour_started');
});

quiet-before-close fires when the tour is asked to stop but before it's hidden. It's also cancelable, so you can keep the tour open until some condition is met.

tour.addEventListener('quiet-before-close', event => {
  if (!userHasSavedTheirWork()) {
    event.preventDefault();
  }
});

quiet-close fires after the tour has stopped. This is the natural place to remember that the user finished so the tour doesn't run again.

tour.addEventListener('quiet-close', () => {
  localStorage.setItem('tour-completed', 'true');
});

quiet-tour-change fires each time the tour moves to a different step. Inspect event.detail for the from index (-1 when the tour was just started), the to index, the item that became active, the fromItem the tour moved from (null when the tour was just started), and the total number of steps.

This event fires after the new step has been shown: the page has scrolled to the target, the spotlight has moved, and the popover is in place. It's a notification rather than a hook you can cancel, so use it to react to a step, not to prepare for one. If a step needs the DOM in a particular state, such as an expanded panel or a loaded view, set that up before calling start() so the target is ready when its turn comes.

tour.addEventListener('quiet-tour-change', event => {
  const { from, to, item, fromItem, total } = event.detail;
  console.log(`Moved from step ${from} to step ${to} of ${total}`);
  analytics.track('tour_step_viewed', { step: item.name, prevStep: fromItem?.name });
});

Keyboard support Jump to heading

While a tour is active, the following keys are available unless without-keyboard is set.

Key	Action
`ArrowRight`	Advances to the next step.
`ArrowLeft`	Returns to the previous step.
`Escape`	Stops the tour.

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

Self-hosted

To manually import <quiet-tour> from the CDN, use the following code.

import 'https://cdn.quietui.org/v5.3.1/components/tour/tour.js';

To manually import <quiet-tour> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path.

import '/path/to/quiet/components/tour/tour.js';

Slots Jump to heading

Tour supports the following slots. Learn more about using slots

Name	Description
(default)	One or more `<quiet-tour-item>` elements, one for each step of the tour.

Properties Jump to heading

Tour has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property	Description	Type	Default
`active`	Whether the tour is currently running. To start or stop the tour, use the `start()` and `stop()` methods.	`boolean`	`false`
`activeIndex` `active-index`	The index of the active step. This is the source of truth for the active step.	`number`	`-1`
`activeName` `active-name`	The name of the active step. To use this, add the `name` attribute to one or more `<quiet-tour-item>` elements. Kept in sync with `active-index`. When the active step has no name, this will be empty.	`string`	`''`
`distance`	The distance of the popover from the highlighted element.	`number`	`10`
`offset`	The offset of the popover along the highlighted element.	`number`	`0`
`stagePadding` `stage-padding`	The space between the highlighted element and the edge of the spotlight's cutout.	`number`	`8`
`stageRadius` `stage-radius`	The corner radius of the spotlight's cutout.	`number`	`6`
`lightDismiss` `light-dismiss`	Allows the tour to be stopped when clicking the spotlight outside of the highlighted element.	`boolean`	`false`
`withoutSpotlight` `without-spotlight`	Hides the dimming spotlight, highlighting the element with the popover alone.	`boolean`	`false`
`withSteps` `with-steps`	Shows a "Step X of Y" counter beside each step's actions.	`boolean`	`false`
`withoutAnimation` `without-animation`	Disables the animated transition of the spotlight between steps. When set, the spotlight snaps directly to each target and the popover appears immediately instead of sliding in as the spotlight settles.	`boolean`	`false`
`withoutKeyboard` `without-keyboard`	Disables keyboard navigation, including the arrow keys and `Escape`.	`boolean`	`false`
`ignoreReducedMotion` `ignore-reduced-motion`	When set, the tour's animations will run even when the user prefers reduced motion.	`boolean`	`false`
`hasNext`	Whether there's a step after the current one.	`boolean`
`hasPrevious`	Whether there's a step before the current one.	`boolean`

Methods Jump to heading

Tour supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name	Description	Arguments
`start()`	Starts the tour. Pass a step name or index to start at a specific step, otherwise the first step is shown.	`nameOrIndex: string \| number`
`stop()`	Stops the tour.
`next()`	Advances to the next step. If on the last step, the tour stops.
`previous()`	Returns to the previous step. Does nothing on the first step.
`goTo()`	Jumps to a specific step by name or index.	`nameOrIndex: string \| number`

Events Jump to heading

Tour dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`quiet-before-open`	Emitted when the tour is instructed to start but before it is shown. Calling `event.preventDefault()` will prevent the tour from starting.
`quiet-open`	Emitted after the tour has started and the first step has been shown.
`quiet-before-close`	Emitted when the tour is instructed to stop but before it is hidden. Calling `event.preventDefault()` will prevent the tour from stopping.
`quiet-close`	Emitted after the tour has stopped.
`quiet-tour-change`	Emitted when the tour moves to a different step. Inspect `event.detail` to see the `from` index, the `to` index, the `item` that became active, the `fromItem` the tour moved from, and the `total` number of steps.

CSS custom properties Jump to heading

Tour supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--spotlight-background`	The background of the dimming spotlight shown around the highlighted element.	`var(--quiet-backdrop-color)`
`--spotlight-speed`	The duration of the spotlight's fade in and out.	`250ms`
`--show-duration`	The duration of the popover's show animation.	`100ms`
`--hide-duration`	The duration of the popover's hide animation.	`100ms`
`--arrow-size`	The size of the popover's arrow.	`0.375rem`

CSS parts Jump to heading

Tour exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`spotlight`	The dimming spotlight that surrounds the highlighted element.	`::part(spotlight)`
`popover`	The popover that shows the active step's content.	`::part(popover)`
`arrow`	The popover's arrow.	`::part(arrow)`

Custom States Jump to heading

Tour has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name	Description	CSS selector
`active`	Applied to the host while the tour is running.	`:state(active)`
`first`	Applied to the host while the first step is showing.	`:state(first)`
`last`	Applied to the host while the last step is showing.	`:state(last)`

Dependencies Jump to heading

Tour automatically imports the following elements. Sub-dependencies are also included in this list.

<quiet-tour-item>

Tour

Welcome to Quiet UI

Search

Light & dark

Pick a color

Browse the docs

Live examples

Keyboard friendly

Tour complete

Examples Jump to heading #

Tour basics Jump to heading #

Adding steps Jump to heading #

Welcome

Keep going

All done

Highlighting a single element Jump to heading #

Monthly active users

Starting and stopping a tour Jump to heading #

Setting the placement Jump to heading #

Top

Right

Bottom

Centering a step Jump to heading #

Welcome aboard

Here's the good stuff

Highlighting without a spotlight Jump to heading #

No dimming

Just the popover

That's a wrap

Showing a step counter Jump to heading #

First things first

Halfway there

Last stop

Light dismissal Jump to heading #

Controlling the tour programmatically Jump to heading #

Naming steps Jump to heading #

Responding to changes Jump to heading #

Keyboard support Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Custom States Jump to heading #

Dependencies Jump to heading #

Examples Jump to heading

Tour basics Jump to heading

Adding steps Jump to heading

Highlighting a single element Jump to heading

Starting and stopping a tour Jump to heading

Setting the placement Jump to heading

Centering a step Jump to heading

Highlighting without a spotlight Jump to heading

Showing a step counter Jump to heading

Light dismissal Jump to heading

Controlling the tour programmatically Jump to heading

Naming steps Jump to heading

Responding to changes Jump to heading

Keyboard support Jump to heading

API Jump to heading

Importing Jump to heading

Slots Jump to heading

Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

CSS parts Jump to heading

Custom States Jump to heading

Dependencies Jump to heading