Great UI Avatar Stack

Component 47

About

A dynamic stack of overlapping user avatars featuring custom tooltip display variants that track hover directions or coordinates with spring dynamics.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Great UI Avatar Stack to your project and fits it to your theme.

Code

How Great UI Avatar Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import AvatarStack from "@/components/ui/great-ui-avatar-stack"

export default function AvatarStackPreview() {
  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-12 p-8 select-none">
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Spring Tilt (Moves with Cursor)</span>
        <AvatarStack variant="spring-tilt" size="md" />
      </div>
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Spring Box (Inner Tilting Box)</span>
        <AvatarStack variant="spring-box" size="md" />
      </div>
      <div className="flex flex-col items-center gap-3">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Slide Blur (Directional Reveal)</span>
        <AvatarStack variant="slide-blur" size="md" />
      </div>
      <div className="flex w-full flex-col items-center gap-6 border-t border-neutral-200 pt-8 dark:border-neutral-800">
        <span className="text-neutral-450 font-mono text-xs tracking-wider uppercase dark:text-neutral-500">Size Comparison (Spring Tilt)</span>
        <div className="flex flex-wrap items-center justify-center gap-12">
          {(["sm", "md", "lg"] as const).map((size) => (
            <div key={size} className="flex flex-col items-center gap-2">
              <span className="font-mono text-[10px] text-neutral-400">{size === "sm" ? "Small (SM)" : size === "md" ? "Medium (MD)" : "Large (LG)"}</span>
              <AvatarStack variant="spring-tilt" size={size} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}