Multi-step lead form

Pro

Three step quote request with option cards, validation, progress bar and direction-aware transitions.

app/page.tsx

"use client";

import { Shield, Star } from "lucide-react";
import { MultiStepLeadForm } from "@/components/facade/multi-step-lead-form";

export default function Demo() {
  return (
    <div className="mx-auto w-full max-w-xl p-4">
      <MultiStepLeadForm
        title="Get a free plumbing quote"
        successMessage="A Bluebonnet Plumbing advisor will call you within one business hour. A confirmation is on its way to your inbox."
        onSubmit={() => new Promise((resolve) => setTimeout(resolve, 900))}
      />
      <div className="mt-4 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs text-muted-foreground">
        <span className="flex items-center gap-1.5">
          <Star className="size-3.5 fill-warning text-warning" aria-hidden />
          4.9 from 2,100+ Austin homeowners
        </span>
        <span className="flex items-center gap-1.5">
          <Shield className="size-3.5 text-success" aria-hidden />
          Licensed, bonded and insured. TX M-41207
        </span>
      </div>
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/multi-step-lead-form

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { MultiStepLeadForm } from "@/components/facade/multi-step-lead-form";

export default function Page() {
  return <MultiStepLeadForm />;
}

Props

MultiStepLeadFormProps is exported, so you can extend or wrap it. Every prop has a default; <MultiStepLeadForm /> renders the example above.

Props of MultiStepLeadForm
Prop	Type	Description
title	string
options	LeadOption[]
timelines	string[]
onSubmit	(data: LeadFormData) => void \| Promise<void>	Called with the collected data on the final step. May return a promise.
successTitle	string
successMessage	string
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade multi-step lead form to this page and adapt the copy to our business.