import * as React from "react"; import { TutorialStepperSaasOnboardingChecklistOne } from "@/registry/tutorial-stepper-saas-onboarding-checklist-one/tutorial-stepper-saas-onboarding-checklist-one"; 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"; export function TutorialStepperSaasOnboardingChecklistOneDemo() { const steps = [ { id: "workspace", title: "Name your workspace", estMins: 2, content: (

Provide a name to identify your workspace.

), help: [ { q: "Why do I need this?", a: "We use it to label emails and invites.", }, ], }, { id: "invite", title: "Invite teammates", estMins: 3, optional: true, content: (

Invite collaborators to get started together.

), }, { id: "connect", title: "Connect an integration", estMins: 4, content: (

Choose a provider and authorize access.

), }, { id: "prefs", title: "Set preferences", estMins: 2, content: (

Select defaults for notifications and themes.

), }, ]; return (

); } export default TutorialStepperSaasOnboardingChecklistOneDemo;

Simple