Components

Onboarding Tour

A guided product tour that spotlights elements step by step.

php artisan blatui:add onboarding-tour

@php
    $steps = [
        [
            'target' => '#tour-search',
            'title' => 'Search anything',
            'body' => 'Jump to any project, file, or teammate from one box. Try ⌘K from anywhere.',
            'placement' => 'bottom',
        ],
        [
            'target' => '#tour-create',
            'title' => 'Create in one click',
            'body' => 'Spin up a new project, doc, or board here. We pre-fill sensible defaults.',
            'placement' => 'bottom',
        ],
        [
            'target' => '#tour-profile',
            'title' => 'Your workspace',
            'body' => 'Settings, billing, and theme live behind your avatar. That is the whole tour!',
            'placement' => 'left',
        ],
    ];
@endphp

<div class="w-full max-w-xl">
    {{-- A tiny faux app bar with three spotlight targets. --}}
    <div class="bg-card text-card-foreground flex items-center gap-3 rounded-lg border p-3">
        <input
            id="tour-search"
            type="text"
            placeholder="Search…"
            class="border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-9 min-w-0 flex-1 rounded-md border px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
        />

        <x-ui.button id="tour-create" variant="default" size="sm">
            <x-lucide-plus />
            New
        </x-ui.button>

        <button
            id="tour-profile"
            type="button"
            class="bg-primary text-primary-foreground focus-visible:ring-ring/50 inline-flex size-9 shrink-0 items-center justify-center rounded-full text-sm font-medium outline-none focus-visible:ring-[3px]"
            aria-label="Open your workspace menu"
        >AB</button>
    </div>

    {{-- The tour itself. The Start button lives in the slot so it shares the tour's Alpine
         scope and can flip `active` on — no external wiring needed. --}}
    <x-ui.onboarding-tour :steps="$steps" class="mt-6 block">
        <x-ui.button variant="outline" @click="start()">
            <x-lucide-sparkles />
            Start tour
        </x-ui.button>
    </x-ui.onboarding-tour>
</div>

API Reference

Props, slots and exposed methods for <x-ui.onboarding-tour>.

Props

Prop	Type	Default	Description
`steps`*	`array`	`[]`	The ordered list of tour steps. Each step spotlights one element and shows a coachmark card. See Each step below.
`open`	`bool`	`false`	Start the tour immediately on page load. Prefer a "Start tour" trigger in the slot so the page is not covered on first paint.

* Required.

Each step

Prop	Type	Default	Description
`target`*	`string`	—	A CSS selector (passed to querySelector) for the element to spotlight. If no element matches, the card centers and the spotlight is skipped for that step.
`title`*	`string`	—	The step heading. Also used as the dialog's accessible name.
`body`	`string`	—	The step description shown under the title.
`placement`	`string`	`'bottom'`	Preferred side of the target for the card. Auto-flips to the opposite side if it would overflow the viewport. `bottom` `top` `left` `right`

Slots

Slot	Description
`default`	Your trigger UI (e.g. a "Start tour" button). It shares the tour's Alpine scope, so a child can call start() directly with no external wiring.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`start()`	Resets to the first step and opens the tour.
`next()`	Advances to the next step, or finishes the tour on the last step.
`back()`	Returns to the previous step (no-op on the first step).
`end()`	Closes the tour (the Skip button and Escape both call this).