SIG—11 Signature system

Tour

A guided tour whose spotlight travels between real elements, follows them through scrolling and reflow, and explains each one beside it.

Live — this one is real

Five steps, one missingTwo steps

Arrow keys step through; Escape leaves. The spotlight follows its element while the page scrolls or reflows.

Atlas

Open reviews

3 today

Drafts

Shipped this month

2 more than August

Recent work
	Owner	Updated
Autumn launch	Rin Sato	12 min ago
Pricing page	Mei Tanaka	1 h ago
Onboarding emails	Ade Okafor	Yesterday

Try it

Usage

tsx

import { useState } from "react";
import { Tour } from "mizu-ui";

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        type="button"
        id="tour-start"
        className="mizu-text-button"
        onClick={() => setOpen(true)}
      >
        Take the tour
      </button>
      <Tour
        open={open}
        onOpenChange={setOpen}
        steps={[
          {
            target: "#tour-start",
            title: "This started the tour",
            body: "Each step points at a real element on the page.",
          },
        ]}
      />
    </>
  );
}

This code, running — no configuration beyond the data

Keyboard

→·Enter: Next step
←: Previous step
Esc: Leave the tour

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

npx shadcn@latest add 0xuser64bit/mizu/tour

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Tour.tsx

Source is included in the npm package under src/signature/Tour.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
steps	TourStep[]	—	target (selector or function), title, body, placement and padding.
open / onOpenChange	boolean / function	—	Controlled visibility; Escape and Skip request closing.
step / defaultStep / onStepChange	number	—	The current step.
onFinish	() => void	—	Called when the last step is completed, not when skipped.
label	string	"Product tour"	Accessible name of the tour.

Accessibility

A native modal dialog: the page becomes inert, focus stays on the tour's primary action and returns afterwards, Escape leaves. Each step is announced with its position; arrow keys move between steps. When a step's element is missing, the card centres itself and says so.

Motion

The spotlight pursues each new element — even while it scrolls into view — framed by accent corner brackets, while the card travels to the side with room and its copy fades in. Progress diamonds grow at the current step. Reduced motion moves the spotlight directly.

Works alongside

Chronicle TrendChart Waveform Plane