Overlays, new
Guided Tour
A product tour with a spring-morphing SVG spotlight, a following coach mark, interactive targets, keyboard navigation and focus restoration.
$149 once · every Pro piece
Customize
Install
npx shadcn@latest add @obsyde/guided-tourNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { GuidedTour } from '@/components/obsyde/ember/guided-tour/GuidedTour';
export function Example() {
return (
<GuidedTour />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/guided-tour/GuidedTour.tsxcomponentember/guided-tour/guided-tour.cssstylesember/guided-tour/GuidedTourDemo.tsxdemoember/shared/spring.tssharedember/shared/accent.tssharedember/shared/rolling-number.csssharedember/shared/RollingNumber.tsxsharedember/overlays-kit/kit.tssharedember/kit2-kit/kit.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
dimDim strength | number | 0.68 |
paddingTarget padding | number | 9 |
interactiveInteractive targets | boolean | true |