Acquisition funnel

Every workspace ever opened, down through the live, the paid and the billing ones to Team or Enterprise, with the clicks and leads that brought them in; reads acquisitionFunnel().

Preview

app/saas/customers/components/acquisition-funnel.tsx

"use client"

import { formatCompact } from "@/lib/format"
import { FunnelChart } from "@/components/ui/funnel-chart"
import { Widget } from "@/components/ui/widget"

export type AcquisitionFunnelProps = {
  steps: { label: string; value: number }[]
  spend: { clicks: number; leads: number }
}

/** Every workspace ever opened at the top, the biggest tiers at the bottom. */
export function AcquisitionFunnel({ steps, spend }: AcquisitionFunnelProps) {
  return (
    <Widget
      data-widget="widget-saas-customers-acquisition-funnel"
      title="Acquisition funnel"
      description="Every workspace ever opened, down to the ones on a big tier"
      className="h-full"
      footer={`${formatCompact(spend.clicks)} ad clicks and ${formatCompact(spend.leads)} leads brought them in`}
    >
      <FunnelChart steps={steps} valueFormatter={(value) => formatCompact(value)} />
    </Widget>
  )
}

Install

npx shadcn@latest add @vibra/widget-saas-customers-acquisition-funnel

Needs the @vibra registry in your components.json — set it up once.

Source

app/saas/customers/components/acquisition-funnel.tsx

"use client"

import { formatCompact } from "@/lib/format"
import { FunnelChart } from "@/components/ui/funnel-chart"
import { Widget } from "@/components/ui/widget"

export type AcquisitionFunnelProps = {
  steps: { label: string; value: number }[]
  spend: { clicks: number; leads: number }
}

/** Every workspace ever opened at the top, the biggest tiers at the bottom. */
export function AcquisitionFunnel({ steps, spend }: AcquisitionFunnelProps) {
  return (
    <Widget
      data-widget="widget-saas-customers-acquisition-funnel"
      title="Acquisition funnel"
      description="Every workspace ever opened, down to the ones on a big tier"
      className="h-full"
      footer={`${formatCompact(spend.clicks)} ad clicks and ${formatCompact(spend.leads)} leads brought them in`}
    >
      <FunnelChart steps={steps} valueFormatter={(value) => formatCompact(value)} />
    </Widget>
  )
}

Its page

On its page the card sits among the rest of the dashboard and shares its range and its data with them.

From the Customers dashboard page