Tour

A short guided walk over the real interface, one spotlight at a time.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, Row, Stack, Tour } from '@weft-js/warp'export function Dashboard() {  const open = state(false)  return (    <Stack gap="group" align="center">      <Row gap="related">        <Button data-tour="new" icon="plus">New project</Button>        <Button data-tour="deploys" emphasis="outline" tone="neutral">Deploys</Button>        <Button data-tour="team" emphasis="outline" tone="neutral">Team</Button>      </Row>      <Button emphasis="link" onClick={() => (open.value = true)}>Take the tour</Button>      <Tour steps={TOUR_STEPS} open={open} />    </Stack>  )}const TOUR_STEPS = [  { target: '[data-tour="new"]', title: 'Start a project', body: 'Connect a repository and your first deploy runs in about a minute.' },  { target: '[data-tour="deploys"]', title: 'Follow every deploy', body: 'Failed ones land here first, with their logs.' },  { target: '[data-tour="team"]', title: 'Bring your team', body: 'Invite people and choose what they can do.' },]

Installation

npm install @weft-js/warp

Usage

tsx

import { Tour } from '@weft-js/warp'

Accessibility

→: Next step
←: Previous step
Esc: Ends it and returns focus

API Reference

Prop	Type	Default	Description
`id`	`string`	—	The element id. One is made for you if you leave it out.
`steps`	`TourStep[]`	—	A target selector, a title and a body.
`open`	`boolean \| State<boolean>`	—	Whether it runs: a state or a value.

Event	Type	Default	Description
`onDone`	`(() => void)`	—	It ran to the end.
`onSkip`	`(() => void)`	—	It was skipped.
`onStepChange`	`((index: number) => void)`	—	Called with the step's index.

RelatedCoachmark Checklist