Avatar Stack

Overlapping avatars with an overflow counter and a lift on hover. Falls back to initials when no image is supplied.

avatarpresencecollaboration

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { AvatarStack } from "@/registry/components/avatar-stack";

export function Example() {
  return <AvatarStack />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Glow Button

A pill button with a sweeping specular highlight and a soft brand-coloured bloom behind it. Both effects are hidden under reduced motion.

Copy Button

One-click clipboard copy with a checkmark confirmation. Uses the Clipboard API and resets after 1.6 seconds.

Kbd

Keyboard shortcut chips with a raised border treatment. Includes a KbdGroup helper for multi-key combos like ⌘K.