# Squiggle Arrow

> Hand-drawn squiggly SVG arrow for React and shadcn/ui in wavy, bouncy, or smooth variants, for pointing at calls to action.

Source: https://www.cult-ui.com/docs/components/squiggle-arrow

## Example

```tsx title="squiggle-arrow-demo.tsx"
import SquigglyArrow from "@/components/ui/squiggle-arrow"

function SquigglyArrowDemo() {
  return (
    <main className="flex w-full flex-col items-center justify-center gap-12">
      <div className="flex flex-col items-center gap-12">
        <div className="flex flex-col gap-6">
          <h2 className="text-center text-2xl font-semibold">Variants</h2>
          <div className="flex flex-col gap-4">
            <div className="flex items-center gap-4">
              <span className="text-foreground w-24">Wavy</span>
              <SquigglyArrow variant="wavy" />
            </div>
            <div className="flex items-center gap-4">
              <span className="text-foreground w-24">Bouncy</span>
              <SquigglyArrow variant="bouncy" className="text-blue-500" />
            </div>
            <div className="flex items-center gap-4">
              <span className="text-foreground w-24">Smooth</span>
              <SquigglyArrow variant="smooth" className="text-purple-600" />
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-6">
          <h2 className="text-center text-2xl font-semibold">Directions</h2>
          <div className="flex flex-wrap justify-center gap-8 p-4">
            <div className="flex flex-col items-center gap-2">
              <span className="text-foreground">Right</span>
              <SquigglyArrow direction="right" className="text-green-600" />
            </div>
            <div className="flex flex-col items-center gap-2">
              <span className="text-foreground">Left</span>
              <SquigglyArrow direction="left" className="text-orange-600" />
            </div>
            <div className="flex flex-col items-center gap-2">
              <span className="text-foreground">Down</span>
              <SquigglyArrow direction="down" className="text-pink-600" />
            </div>
            <div className="flex flex-col items-center gap-2">
              <span className="text-foreground">Up</span>
              <SquigglyArrow direction="up" className="text-cyan-600" />
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-6">
          <h2 className="text-center text-2xl font-semibold">Sizes</h2>
          <div className="flex items-center gap-8 overflow-x-auto p-4">
            <SquigglyArrow width={150} height={75} strokeWidth={2} />
            <SquigglyArrow
              width={250}
              height={125}
              strokeWidth={3}
              className="text-blue-500"
            />
            <SquigglyArrow
              width={300}
              height={150}
              strokeWidth={4}
              className="text-purple-600"
            />
          </div>
        </div>
      </div>
    </main>
  )
}

export default SquigglyArrowDemo
```

SquiggleArrow is a React SVG component for shadcn/ui. Use it to point at a call to action, annotate screenshots, or add informal callouts to landing pages and product walkthroughs.

## Installation

### CLI

```bash
npx shadcn@latest add @cult-ui/squiggle-arrow
```

### Manual

**Copy and paste the following code into your project.**

```tsx title="squiggle-arrow.tsx"
import { cn } from "@/lib/utils"

interface SquigglyArrowProps {
  width?: number
  height?: number
  strokeWidth?: number
  className?: string
  direction?: "right" | "left" | "up" | "down"
  variant?: "wavy" | "bouncy" | "smooth"
}

export default function SquigglyArrow({
  width = 200,
  height = 100,
  strokeWidth = 2.5,
  className,
  direction = "right",
  variant = "wavy",
}: SquigglyArrowProps) {
  const paths = {
    wavy: {
      body: "M 15 50 Q 35 35, 55 48 T 95 52 Q 115 48, 135 50 Q 145 52, 155 48",
      head: "M 155 48 Q 147 44, 143 42 M 155 48 Q 148 53, 144 56",
    },
    bouncy: {
      body: "M 15 50 Q 45 32, 65 50 Q 85 68, 105 50 Q 125 32, 145 50 Q 152 54, 158 50",
      head: "M 158 50 Q 149 45, 145 43 M 158 50 Q 150 56, 146 59",
    },
    smooth: {
      body: "M 15 50 Q 60 38, 100 48 Q 135 56, 158 50",
      head: "M 158 50 Q 149 45, 145 43 M 158 50 Q 150 56, 146 59",
    },
  }

  const rotations = {
    right: "rotate(0)",
    left: "rotate(180 100 50)",
    down: "rotate(90 100 50)",
    up: "rotate(-90 100 50)",
  }

  const selectedPath = paths[variant]
  const rotation = rotations[direction]

  return (
    <svg
      width={width}
      height={height}
      viewBox="-10 -10 220 120"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={cn("text-foreground", className)}
    >
      <title>Squiggly arrow</title>
      <g transform={rotation}>
        {/* Squiggly arrow body */}
        <path
          d={selectedPath.body}
          stroke="currentColor"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          fill="none"
        />

        {/* Arrow head */}
        <path
          d={selectedPath.head}
          stroke="currentColor"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
        />
      </g>
    </svg>
  )
}
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import SquigglyArrow from "@/components/ui/squiggle-arrow";
```

### Basic Usage

```tsx
<SquigglyArrow />
```

### Variants

The component supports three different variants with unique squiggle patterns:

```tsx
// Wavy variant (default)
<SquigglyArrow variant="wavy" />

// Bouncy variant
<SquigglyArrow variant="bouncy" />

// Smooth variant
<SquigglyArrow variant="smooth" />
```

### Directions

Control the arrow direction:

```tsx
// Right (default)
<SquigglyArrow direction="right" />

// Left
<SquigglyArrow direction="left" />

// Up
<SquigglyArrow direction="up" />

// Down
<SquigglyArrow direction="down" />
```

### Custom Sizes

Adjust the arrow dimensions and stroke width:

```tsx
// Small arrow
<SquigglyArrow width={150} height={75} strokeWidth={2} />

// Medium arrow
<SquigglyArrow width={250} height={125} strokeWidth={3} />

// Large arrow
<SquigglyArrow width={300} height={150} strokeWidth={4} />
```

### Custom Colors

Use Tailwind classes to customize the arrow color:

```tsx
<SquigglyArrow className="text-blue-500" />
<SquigglyArrow className="text-purple-600" />
<SquigglyArrow className="text-green-600" />
```

## API Reference

### SquigglyArrow Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `number` | `200` | Width of the SVG arrow |
| `height` | `number` | `100` | Height of the SVG arrow |
| `strokeWidth` | `number` | `2.5` | Thickness of the arrow stroke |
| `className` | `string` | - | Additional CSS classes |
| `direction` | `"right" \| "left" \| "up" \| "down"` | `"right"` | Direction the arrow points |
| `variant` | `"wavy" \| "bouncy" \| "smooth"` | `"wavy"` | Visual style of the squiggle pattern |

## Examples

### Variant Showcase

```tsx
<div className="flex flex-col gap-4">
  <div className="flex items-center gap-4">
    <span>Wavy</span>
    <SquigglyArrow variant="wavy" />
  </div>
  <div className="flex items-center gap-4">
    <span>Bouncy</span>
    <SquigglyArrow variant="bouncy" className="text-blue-500" />
  </div>
  <div className="flex items-center gap-4">
    <span>Smooth</span>
    <SquigglyArrow variant="smooth" className="text-purple-600" />
  </div>
</div>
```

### Direction Showcase

```tsx
<div className="flex flex-wrap gap-8 justify-center">
  <div className="flex flex-col items-center gap-2">
    <span>Right</span>
    <SquigglyArrow direction="right" className="text-green-600" />
  </div>
  <div className="flex flex-col items-center gap-2">
    <span>Left</span>
    <SquigglyArrow direction="left" className="text-orange-600" />
  </div>
  <div className="flex flex-col items-center gap-2">
    <span>Down</span>
    <SquigglyArrow direction="down" className="text-pink-600" />
  </div>
  <div className="flex flex-col items-center gap-2">
    <span>Up</span>
    <SquigglyArrow direction="up" className="text-cyan-600" />
  </div>
</div>
```

### Size Variations

```tsx
<div className="flex items-center gap-8">
  <SquigglyArrow width={150} height={75} strokeWidth={2} />
  <SquigglyArrow
    width={250}
    height={125}
    strokeWidth={3}
    className="text-blue-500"
  />
  <SquigglyArrow
    width={300}
    height={150}
    strokeWidth={4}
    className="text-purple-600"
  />
</div>
```

### Call-to-Action Arrow

```tsx
<div className="flex items-center gap-2">
  <span>Learn more</span>
  <SquigglyArrow variant="bouncy" className="text-primary" />
</div>
```

### Decorative Arrow

```tsx
<div className="flex flex-col items-center gap-4">
  <h2>Check this out</h2>
  <SquigglyArrow
    direction="down"
    variant="smooth"
    className="text-muted-foreground"
  />
  <p>Scroll down for more</p>
</div>
```