CTA, ember

Pro

Closing call to action on a warm drifting ember panel: headline, white and outline buttons, a checklist and an optional email row with honeypot and live states.

View as Markdownlucide-reactmotion

Open

app/page.tsx

"use client";

import { CtaEmber } from "@/components/facade/cta-ember";

export default function Demo() {
  return (
    <CtaEmber
      eyebrow="Free roof inspections this month"
      title="Find the leak before the first freeze does."
      description="A certified inspector walks your roof, photographs every problem spot and sends a written report the same day. Most visits take 45 minutes."
      primaryCta={{ label: "Book a free inspection", href: "#book" }}
      secondaryCta={{ label: "Call (704) 555-0168", href: "tel:+17045550168" }}
      points={[
        "Photo report in your inbox the same day",
        "Written, itemized repair price",
        "Licensed and insured in North Carolina",
        "10 year workmanship warranty",
      ]}
      capture={{
        heading: "Not ready to book?",
        text: "Get our fall roof checklist and one reminder before storm season.",
        buttonLabel: "Send the checklist",
        successText: "Sent. The checklist is on its way to your inbox.",
        onSubmit: () => new Promise((r) => setTimeout(r, 900)),
      }}
    />
  );
}

Installation

npx shadcn@latest add @facadeui/cta-ember

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

Usage

import { CtaEmber } from "@/components/facade/cta-ember";

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

Props

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

Props of CtaEmber
Prop	Type	Description
eyebrow	string
title	string
description	string
primaryCta	CtaEmberAction
secondaryCta	CtaEmberAction
points	string[]	Short reasons to act, shown as a checklist next to the copy.
capture	CtaEmberCapture	Email row under the panel content. Leave out to hide it.
palette	EmberPaletteInput	Surface colors. Defaults to "ember".
cycle	boolean	Cross-fade slowly between the presets.
className	string

Ask your agent

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

Add the Facade cta, ember to this page and adapt the copy to our business.

FAQ

How do I install the cta, ember?

Add the @facadeui registry with your license key to components.json once, then run npx shadcn@latest add @facadeui/cta-ember. The source lands in components/facade/cta-ember.tsx and you own it.

Is the cta, ember free?

No, it is part of Facade Pro. One license is $149 one-time for one developer and covers unlimited client projects; Team is $399 for up to 10 developers.

Can I customize the cta, ember?

Yes. It is plain React and Tailwind source in your project. Colors come from semantic tokens such as bg-brand, so your globals.css restyles it. 10 props are typed and exported as CtaEmberProps.