Custom Curved Arrow

Pumki UI

Installation

import { CustomCurvedArrow } from '@/components/pumki-ui/sections/timeline/custom-curved-arrow.tsx';

1<CustomCurvedArrow />

Pumki UI

Prop	Type	Default	Description
startElement	`React.RefObject<HTMLElement>`	null	required
endElement	`React.RefObject<HTMLElement>`	null	required
obstacleElement	`React.RefObject<HTMLElement>`	null	undefined
startX	number	0	Manual X coordinate for the start point (overrides element if provided).
startY	number	0	Manual Y coordinate for the start point (overrides element if provided).
endX	number	100	Manual X coordinate for the end point (overrides element if provided).
endY	number	100	Manual Y coordinate for the end point (overrides element if provided).
curveIntensity	number	0.4	Controls the strength of the curve between start and end.
curveType	”smooth"	"dramatic"	"s-curve"
curveDirection	”auto"	"up"	"down"
strokeWidth	number	4	Width of the arrow stroke.
arrowSize	number	20	Size of the arrow head.
className	string	""	Custom CSS classes for the container.
animated	boolean	undefined	If true, enables arrow animation (not implemented in current code).
startPosition	”top"	"bottom"	"left"
endPosition	”top"	"bottom"	"left"