Docs
→
Button
→
Arrow Points to CTA

Arrow Points to CTA

Animated canvas arrow that guides the user’s cursor toward a target CTA button.

by Sarthak Kapila

Buy now

Installation

Usage

Arrow Points to CTA Example

1import ArrowPointsToCta from "@/components/arrow-pointer";
2import ButtonBlack from "@/components/chunky-button";
3

4export default function Example() {
5  return (
6    <ArrowPointsToCta
7      button={<ButtonBlack title="Buy now" />}
8      buttonWidth="default"
9      arrow={{
10        thickness: 2,
11        color: "rgb(255, 0, 0)",
12        type: "dashed",
13        gapBetweenDashes: 15,
14        lineCap: "round",
15        tipLength: 12,
16        preview: false
17      }}
18    />
19  );
20}

Understanding the component

The component renders a full-screen canvas and draws a curved arrow from the current mouse position toward the provided CTA element. Visibility and opacity are driven by whether the CTA is in view and how far the cursor is from the target. The stroke style, tip, and dash patterns are configurable.

Credits

By Sarthak Kapila.

Props

ArrowPointsToCta

PropTypeDefaultDescription
buttonReactElement-The CTA element to point at. Required for runtime usage.
buttonWidth"default" | "fill""default"Keep intrinsic button width or stretch to fill container.
classNamestring-Optional class name on the wrapper.
styleReact.CSSProperties-Inline styles for the wrapper.

arrow (config)

PropTypeDefaultDescription
thicknessnumber1Stroke width in pixels.
colorstring"rgb(153, 153, 153)"Stroke color (supports rgb(...) and rgba(...)).
type"solid" | "dashed" | "dotted""dashed"Line dash style.
gapBetweenDashesnumber10Gap size for dashed/dotted line.
lineCap"square" | "round""round"Stroke line cap for the arrow head lines.
tipLengthnumber10Length of the arrow head in pixels.
previewbooleantruePreview arrow when designing on canvas (not used in Next.js).