Draggable Avatar

It displays a circular, draggable avatar with customizable size and style.

Knowledge at
Your Fingertip

npx shadcn@latest add https://scrollxui.dev/registry/draggable-avatar.json

import DraggableAvatar from "@/components/ui/draggable-avatar";

<DraggableAvatar
  image="/image.jpg"
  borderColor="#60A5FA"
  range={200}
  size={90}
/>

It displays a circular, draggable avatar with customizable size and style.

Property	Type	Default	Description
`image`	string	`-`	URL of the avatar image displayed inside the draggable circle.
`borderColor`	string	`"#60A5FA"`	Color of the avatar’s circular border and the bottom marker line.
`range`	number	`300`	Maximum drag distance (in pixels) allowed from the initial position.
`size`	number	`100`	Diameter of the circular avatar in pixels.