Components
Loading preview...
Make your own product tour with shadcn/tour.
@niazmorshed2007
npx shadcn@latest add https://21st.dev/r/niazmorshed2007/tour"use client"
import { useEffect } from "react"
import { Button } from "@/components/ui/button"
import {
TourProvider,
TourAlertDialog,
useTour,
TOUR_STEP_IDS,
} from "@/components/ui/tour"
import { useState } from "react"
function TourDemo() {
const [showTourDialog, setShowTourDialog] = useState(true)
return (
<TourProvider>
<div className="container max-w-[300px] mx-auto py-10">
<div className="space-y-8">
<div className="space-y-2">
<h1 className="text-3xl font-bold">Tour Demo</h1>
<p className="text-muted-foreground">
Example of the tour component in action.
</p>
</div>
<div className="grid gap-8">
<div className="flex items-center justify-between">
<div id={TOUR_STEP_IDS.TEAM_SWITCHER} className="inline-block">
<Button size="lg">
Team Switcher
</Button>
</div>
<div id={TOUR_STEP_IDS.ASK_AI} className="inline-block">
<Button variant="outline" size="lg">
Ask AI
</Button>
</div>
</div>
<div
id={TOUR_STEP_IDS.WRITING_AREA}
className="border rounded-lg p-6 min-h-[200px] bg-muted/30"
>
<div className="text-muted-foreground text-sm">Writing Area</div>
</div>
<div className="flex justify-end">
<div id={TOUR_STEP_IDS.FAVORITES} className="inline-block">
<Button variant="secondary" size="lg">
Favorites
</Button>
</div>
</div>
</div>
</div>
<TourSteps />
<TourAlertDialog isOpen={showTourDialog} setIsOpen={setShowTourDialog} />
</div>
</TourProvider>
)
}
function TourSteps() {
const { setSteps } = useTour()
useEffect(() => {
setSteps([
{
content: (
<div className="space-y-2">
<h3 className="font-medium">Team Switcher</h3>
<p className="text-sm text-muted-foreground">
Switch between different teams and workspaces with a single click
</p>
</div>
),
selectorId: TOUR_STEP_IDS.TEAM_SWITCHER,
position: "bottom",
},
{
content: (
<div className="space-y-2">
<h3 className="font-medium">Writing Area</h3>
<p className="text-sm text-muted-foreground">
A dedicated space for writing and editing your content with real-time
collaboration
</p>
</div>
),
selectorId: TOUR_STEP_IDS.WRITING_AREA,
position: "top",
},
{
content: (
<div className="space-y-2">
<h3 className="font-medium">AI Assistant</h3>
<p className="text-sm text-muted-foreground">
Get intelligent suggestions and help from our AI assistant
</p>
</div>
),
selectorId: TOUR_STEP_IDS.ASK_AI,
position: "bottom",
},
{
content: (
<div className="space-y-2">
<h3 className="font-medium">Favorites</h3>
<p className="text-sm text-muted-foreground">
Quick access to your most important items and frequently used features
</p>
</div>
),
selectorId: TOUR_STEP_IDS.FAVORITES,
position: "left",
},
])
}, [setSteps])
return null
}
export { TourDemo }