TourShell

The frame an onboarding guide runs inside.

Import it from rei-kit/app: import { TourShell } from 'rei-kit/app'

Open TourShell in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { TourShell } from 'rei-kit/app'

const open = ref(true)
const step = ref(0)
</script>

<template>
  <TourShell
    v-model="open"
    :index="step"
    :total="3"
    dialog-label="Welcome tour"
    skip-label="Skip"
    back-label="Back"
    next-label="Next"
    last-label="Start"
    :step-label="(n) => `Step ${n}`"
    @next="step++"
    @back="step--"
    @dismiss="open = false"
  >
    <template #default="{ index }">
      <h2>Step {{ index + 1 }}</h2>
    </template>
  </TourShell>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`index`	`number`	yes	Which slide, zero-based.
`total`	`number`	yes	How many slides there are, so the shell can say "3 of 5" and know when it is on the last one.
`dialogLabel`	`string`	yes	The dialog's accessible name.
`skipLabel`	`string`	yes
`backLabel`	`string`	yes
`nextLabel`	`string`	yes
`lastLabel`	`string`	yes	The button on the final slide — "Start", rather than "Next".
`stepLabel`	`(position: number) => string`	yes	Names one segment for a screen reader, e.g. `(n) => \`Step ${n} of ${total}\``.
`teleportTo`	`string`	'body'	Where the dialog goes. A phone shell clips its children, so the guide has to leave the tree to cover the tab bar and the header alike.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub