feature-walkthrough/
├── FeatureWalkthrough.tsx   # FeatureWalkthrough component & demo visuals
├── index.ts                 # Module entry point (re-exports)
└── block.json               # Block metadata configuration

import { FeatureWalkthrough } from "@/components/blocks/feature-walkthrough";
 
export default function Page() {
  return <FeatureWalkthrough />;
}

import { FeatureWalkthrough } from "@/components/blocks/feature-walkthrough";
 
export default function Page() {
  return (
    <FeatureWalkthrough
      autoPlay
      autoPlayInterval={5000}
    />
  );
}

import { FeatureWalkthrough } from "@/components/blocks/feature-walkthrough";
import type { WalkthroughStep } from "@/components/blocks/feature-walkthrough";
 
function DashboardPreview() {
  return (
    <div style={{ padding: "1rem", textAlign: "center", color: "oklch(0.7 0.02 265)" }}>
      Your dashboard preview here
    </div>
  );
}
 
const steps: WalkthroughStep[] = [
  {
    id: "connect",
    stepNumber: "01",
    title: "Connect",
    description: "Link your workspace in one click.",
    badge: "New",
    visual: <DashboardPreview />,
  },
  {
    id: "configure",
    stepNumber: "02",
    title: "Configure",
    description: "Set preferences and invite your team.",
    visual: <DashboardPreview />,
  },
  {
    id: "launch",
    stepNumber: "03",
    title: "Launch",
    description: "Go live with full analytics enabled.",
    visual: <DashboardPreview />,
  },
];
 
export default function Page() {
  return <FeatureWalkthrough steps={steps} />;
}