Status Badge

Presence pill with a ping animation for online, away, busy and offline states. Hides the ping under reduced motion.

statuspresencebadgelive

LiveAwayIn a callOffline

Usage

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

usage.tsx

import { StatusBadge } from "@/registry/components/status-badge";

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

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

terminal

npm i clsx tailwind-merge

Avatar Stack

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

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.