NewAI SDK Agents

SquiggleArrow

PreviousNext

A playful, hand-drawn squiggly arrow component with customizable variants, directions, and sizes

Variants

WavySquiggly arrow
BouncySquiggly arrow
SmoothSquiggly arrow

Directions

RightSquiggly arrow
LeftSquiggly arrow
DownSquiggly arrow
UpSquiggly arrow

Sizes

Squiggly arrowSquiggly arrowSquiggly arrow

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/squiggle-arrow.json

Usage

import SquigglyArrow from "@/components/ui/squiggle-arrow"

Basic Usage

<SquigglyArrow />

Variants

The component supports three different variants with unique squiggle patterns:

// Wavy variant (default)
<SquigglyArrow variant="wavy" />
 
// Bouncy variant
<SquigglyArrow variant="bouncy" />
 
// Smooth variant
<SquigglyArrow variant="smooth" />

Directions

Control the arrow direction:

// 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:

// 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:

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

API Reference

SquigglyArrow Props

PropTypeDefaultDescription
widthnumber200Width of the SVG arrow
heightnumber100Height of the SVG arrow
strokeWidthnumber2.5Thickness of the arrow stroke
classNamestring-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

<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

<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

<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

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

Decorative Arrow

<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>