Avatar Picker

A profile setup form with animated avatar selection grid, spinning avatar preview, and username input validation.

Create Your Profile

Choose an avatar and enter your username to begin

"use client";

import AvatarPicker from "@/components/vritti/avatar-picker";

export function AvatarPickerExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <AvatarPicker onComplete={(data) => console.log(data)} />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/avatar-picker"

Dependencies


pnpm add motion lucide-react