Integration Connector Grid

Onboarding15: Integration Connector Grid

Onboarding screen that lists available third-party integrations as a responsive grid of rows, each showing an icon, name, and a Connect action (or a "Coming soon" label for services that aren't live yet). Connecting a service toggles local state and rolls into a running " connected" summary line above the CTAs.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/onboarding15?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding15?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding15.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

The installed file exports onboarding15Demo alongside the block: the exact props behind the preview above. Spread it to get a working integrations step in one line.

import { Onboarding15, onboarding15Demo } from "@/components/beste/block/onboarding15";

export default function OnboardingPage() {
  return <Onboarding15 {...onboarding15Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Calendar, Github, MessageSquare } from "lucide-react";
import { Onboarding15 } from "@/components/beste/block/onboarding15";

export default function OnboardingPage() {
  return (
    <Onboarding15
      badge={{ label: "Integrations", variant: "secondary" }}
      heading="Connect your tools"
      description="Link the apps you already use to supercharge your workflow."
      integrations={[
        { id: "slack", name: "Slack", icon: <MessageSquare className="size-5" />, status: "connected" },
        { id: "github", name: "GitHub", icon: <Github className="size-5" />, status: "available" },
        { id: "google", name: "Google Calendar", icon: <Calendar className="size-5" />, status: "available" },
      ]}
      primaryButton={{ label: "Continue", href: "/onboarding/finish" }}
      secondaryButton={{ label: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type ConnectionStatus = "connected" | "available" | "coming-soon";

type Integration = {
  id: string;
  name: string;
  icon: React.ReactNode;
  status: ConnectionStatus;
};

Behavior notes

• Connection state is local: a useState<Set<string>> is seeded once at mount from every integration whose status is "connected". Clicking Connect/Connected only toggles membership in that in-memory set, it never writes back to the integrations prop, so a page refresh resets anything the user toggled during the session.
• Integrations with status: "coming-soon" render a plain "Coming soon" text label in place of the button and can't be toggled at all.
• The " connected" summary line only renders once connected.size is greater than zero; when nothing is connected, an empty spacer <div> fills the same slot so the layout height doesn't jump.
• The grid layout depends on integrations.length: 2 or fewer becomes a centered flex row, exactly 3 becomes a 3-column grid, and 4 or more falls back to a responsive sm:grid-cols-2 lg:grid-cols-3 grid.
• primaryButton and secondaryButton are always-enabled plain links; unlike some sibling onboarding blocks, this screen never disables Continue while integrations remain unconnected.