║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Draggable Avatar description: It displays a circular, draggable avatar with customizable size and style.

<ComponentPreview name="draggableavatar-demo" className="" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="draggable-avatar" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>draggable-avatar.tsx</code> </p> <ComponentSource name="draggable-avatar" /> </Steps> </TabsContent> </Tabs>

Usage

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

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

API Reference

Draggable Avatar

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

Props

<PropsTable rows={[ { prop: "image", type: "string", default: -, description: "URL of the avatar image displayed inside the draggable circle.", }, { prop: "borderColor", type: "string", default: "#60A5FA", description: "Color of the avatar’s circular border and the bottom marker line.", }, { prop: "range", type: "number", default: "300", description: "Maximum drag distance (in pixels) allowed from the initial position.", }, { prop: "size", type: "number", default: "100", description: "Diameter of the circular avatar in pixels.", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║