Avatar

<span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=1" / alt="Image description" width="150" height="150"></span>

"use client";

import React, { useState } from "react";

interface AvatarImageProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarImage({
  className = "",
  children,
}: AvatarImageProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=1" / alt="Image description" width="150" height="150"></span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarImage() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=1" / alt="Image description" width="150" height="150"></span>
    </motion.div>
  );
}

<span className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground">JD</span>

"use client";

import React, { useState } from "react";

interface AvatarInitialsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarInitials({
  className = "",
  children,
}: AvatarInitialsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground">JD</span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarInitials() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground">JD</span>
    </motion.div>
  );
}

<span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=2" / alt="Image description" width="150" height="150"></span>

"use client";

import React, { useState } from "react";

interface AvatarSquareProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarSquare({
  className = "",
  children,
}: AvatarSquareProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=2" / alt="Image description" width="150" height="150"></span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarSquare() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=2" / alt="Image description" width="150" height="150"></span>
    </motion.div>
  );
}

<span className="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=3" / alt="Image description" width="150" height="150"></span>

"use client";

import React, { useState } from "react";

interface AvatarLargeProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarLarge({
  className = "",
  children,
}: AvatarLargeProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=3" / alt="Image description" width="150" height="150"></span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarLarge() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-16 w-16 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=3" / alt="Image description" width="150" height="150"></span>
    </motion.div>
  );
}

<span className="relative flex h-6 w-6 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"></span>

"use client";

import React, { useState } from "react";

interface AvatarSmallProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarSmall({
  className = "",
  children,
}: AvatarSmallProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-6 w-6 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"></span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarSmall() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-6 w-6 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"></span>
    </motion.div>
  );
}

<div className="flex -space-x-4"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=5" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=6" / alt="Image description" width="150" height="150"></div>

"use client";

import React, { useState } from "react";

interface AvatarGroupProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarGroup({
  className = "",
  children,
}: AvatarGroupProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="flex -space-x-4"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=5" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=6" / alt="Image description" width="150" height="150"></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarGroup() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="flex -space-x-4"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=4" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=5" / alt="Image description" width="150" height="150"><img className="h-10 w-10 rounded-full border-2 border-background" src="https://i.pravatar.cc/150?u=6" / alt="Image description" width="150" height="150"></div>
    </motion.div>
  );
}

<div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=7" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background"></span></div>

"use client";

import React, { useState } from "react";

interface AvatarStatusOnlineProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarStatusOnline({
  className = "",
  children,
}: AvatarStatusOnlineProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=7" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background"></span></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarStatusOnline() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=7" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-background"></span></div>
    </motion.div>
  );
}

<div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=8" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-gray-500 ring-2 ring-background"></span></div>

"use client";

import React, { useState } from "react";

interface AvatarStatusOfflineProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarStatusOffline({
  className = "",
  children,
}: AvatarStatusOfflineProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=8" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-gray-500 ring-2 ring-background"></span></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarStatusOffline() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=8" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-gray-500 ring-2 ring-background"></span></div>
    </motion.div>
  );
}

<div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=9" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background"></span></div>

"use client";

import React, { useState } from "react";

interface AvatarStatusBusyProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarStatusBusy({
  className = "",
  children,
}: AvatarStatusBusyProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=9" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background"></span></div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarStatusBusy() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <div className="relative inline-block"><span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=9" / alt="Image description" width="150" height="150"></span><span className="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-background"></span></div>
    </motion.div>
  );
}

<span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=10" / alt="Image description" width="150" height="150"></span>

"use client";

import React, { useState } from "react";

interface AvatarRingProps {
  className?: string;
  children?: React.ReactNode;
}

export default function AvatarRing({
  className = "",
  children,
}: AvatarRingProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=10" / alt="Image description" width="150" height="150"></span>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedAvatarRing() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-primary ring-offset-2 ring-offset-background"><img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=10" / alt="Image description" width="150" height="150"></span>
    </motion.div>
  );
}