94 Pro components and page blocks

Get Pro
uibrik

Product Tour

Pro

Preview

Customize

Padding8px
Radius12px
Duration0.55s
Card width320px

Installation

Pro

Product Tour is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/product-tour

Usage

import { ProductTour } from "@/components/uibrik/product-tour/product-tour";​const steps = [  { title: "Welcome aboard", body: "A quick look around. It takes about thirty seconds." },  { target: "#tour-search", title: "Find anything", body: "Search projects, people and files. Press / from anywhere." },  // …3 more];​<ProductTour  steps={steps}  padding={8}  radius={12}  duration={0.55}  width={320}  showProgress  closeOnOverlay={false}  defaultOpen={false}  waitFor={3000}  overlay="rgb(0 0 0 / 0.55)"  onComplete={() => {}}  onSkip={(step) => {}}  // open={false}  // onOpenChange={(open) => {}}  // step={0}  // onStepChange={(step) => {}}  // labels={{}}/>

Props

ProductTour
padding
Type number
8
Space between a target and the spotlight's edge.
radius
Type number
12
Spotlight corner radius. Steps can set their own.
duration
Type number
0.55
How long the spotlight takes to travel between steps.
width
Type number
320
Width of the step card; narrower on small screens.
showProgress
Type boolean
true
Show the step dots and "2 of 5".
closeOnOverlay
Type boolean
false
End the tour when the dimmed page is clicked.
stepsrequired
Type { target?; title; body?; side?; padding?; radius?; interactive?; advanceOnClick? }[]
–
target is a CSS selector or () => Element; leave it out for a centred step. advanceOnClick moves on when the target is clicked.
open / onOpenChange
Type boolean / (open) => void
–
Controlled open state.
defaultOpen
Type boolean
false
Start open when uncontrolled.
step / onStepChange
Type number / (step) => void
–
Controlled step, e.g. to save progress and resume later.
onComplete
Type () => void
–
The last step's button was pressed.
onSkip
Type (step) => void
–
The tour was closed early, at this step.
waitFor
Type number
3000
Milliseconds to wait for a target to render before skipping its step.
overlay
Type string
"rgb(0 0 0 / 0.55)"
Colour of the dimmed page.
labels
Type { next?; back?; done?; close? }
–
Button text, for translation.
className
Type string
–
Classes for the step card.