Squiggle Arrow

A hand-drawn squiggly arrow component with customizable variants, directions, and sizes. It renders an SVG with different path styles based on the selected variant and direction. Use it to add playful, animated arrow graphics to interfaces.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/squiggle-arrow

npx layro-cli add @nolly-studio/squiggle-arrow

npx layro-cli add @nolly-studio/squiggle-arrow

bunx layro-cli add @nolly-studio/squiggle-arrow

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

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,

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 4, 2026
First release.

Similar components

View all

Direction Aware Tabs