onborda setup

apps/www/src/app/(dashboard)/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { AddApiKeyButton } from "@/components/buttons/AddApiKeyButton";
 import { AddChannelButton } from "@/components/buttons/AddChannelButton";
 import { AddProjectButton } from "@/components/buttons/AddProjectButton";
 import { AddPropertyButton } from "@/components/buttons/AddPropertyButton";
+import { StartOnbordaButton } from "@/components/buttons/StartOnbordaButton";
 import EventsDashboard from "@/components/dashboard/EventsDashboard";
 import { DashboardHeader } from "@/components/dashboard/header";
 import { DashboardShell } from "@/components/dashboard/shell";
@@ -133,6 +134,16 @@ export default async function DashboardPage() {
               You need to generate an API key first
             </EmptyPlaceholder.Description>
             <AddApiKeyButton />
+            <div className="mt-4 space-y-4">
+              <StartOnbordaButton />
+
+              <div
+                id="onborda-step1"
+                className="flex items-center rounded-sm border border-border p-4 px-8"
+              >
+                This is the first step
+              </div>
+            </div>
           </EmptyPlaceholder>
         ) : (
           // Render EventsTable if there are Events

apps/www/src/components/buttons/AddChannelButton.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { createChannel } from "@/actions/create-channel";
+import { toast } from "sonner";
 
 import { Button } from "@dingify/ui/components/button";
 import {
@@ -16,7 +17,6 @@ import {
 } from "@dingify/ui/components/dialog";
 import { Input } from "@dingify/ui/components/input";
 import { Label } from "@dingify/ui/components/label";
-import { toast } from "sonner";
 
 export function AddChannelButton() {
   const [channelName, setChannelName] = useState("");

apps/www/src/components/buttons/StartOnbordaButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { useOnborda } from "onborda";
+
+import { Button } from "@dingify/ui/components/button";
+
+export function StartOnbordaButton() {
+  const { startOnborda } = useOnborda();
+  const handleStartOnborda = () => {
+    startOnborda();
+  };
+
+  return (
+    <Button onClick={handleStartOnborda} variant="outline" size="lg">
+      Start Onborda 🚀
+    </Button>
+  );
+}

apps/www/src/components/providers.tsx

@@ -32,7 +32,9 @@ export function Providers({ children, ...props }: ThemeProviderProps) {
         <BalancerProvider>
           <TooltipProvider delayDuration={0}>
             <OnbordaProvider>
-              <Onborda steps={steps}>{children}</Onborda>
+              <Onborda steps={steps} showOnborda={true}>
+                {children}
+              </Onborda>
             </OnbordaProvider>
           </TooltipProvider>
         </BalancerProvider>