import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogOnboardingEducationCoachmarkThree } from "@/registry/modal-dialog-onboarding-education-coachmark-three/modal-dialog-onboarding-education-coachmark-three"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof ModalDialogOnboardingEducationCoachmarkThree >; type ModalDialogOnboardingEducationCoachmarkThreeChecklistItem = NonNullable< ComponentProps["checklist"] >[number]; const checklist: ModalDialogOnboardingEducationCoachmarkThreeChecklistItem[] = [ { id: "tour", label: "Review dashboard overview", description: "Highlights the new KPI tiles and predictive insights feed.", }, { id: "automation", label: "Enable automation suggestions", description: "Surface recommended flows based on live usage telemetry.", }, { id: "invite", label: "Invite collaborators", description: "Share access with teammates to finish setup together.", }, ]; export function ModalDialogOnboardingEducationCoachmarkThreeDemo() { const [open, setOpen] = React.useState(false); const [completed, setCompleted] = React.useState([]); return (

Coachmark onboarding modal

Demonstrates progress-aware coachmark with embedded media and checklist state.

{completed.length ? (

Completed steps: {completed.join(", ")}

) : null}

setOpen(false)} />

); } export default ModalDialogOnboardingEducationCoachmarkThreeDemo;

Simple