Draggable Avatar

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

Installation

npx shadcn@latest add @scrollxui/draggable-avatar

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.