glasscn
Glass Contact Pill

A liquid-glass contact chip with an avatar and name for messaging apps. The avatar peeks above the pill, or sits inline, and falls back to initials when no image is set.

AK
Alex Kostyniuk
import { GlassContactPill } from "@/components/ui/glasscn/glass-contact-pill"

export function ContactPillDemo() {
  return (

Installation

$ npx shadcn add @glasscn/glass-contact-pill

Variants

top
AK
Alex Kostyniuk
top + caption
AK
onlineAlex Kostyniuk
top + initials
AK
onlineAlex Kostyniuk
leading
AK
Alex Kostyniuk
leading + caption
AK
onlineAlex Kostyniuk
leading + initials
AK
onlineAlex Kostyniuk

API

Prop
Type
Default
Description
GlassContactPillname
React.ReactNode-
Primary label, e.g. the contact's name. Used to derive the fallback initials.
GlassContactPillcaption
React.ReactNode-
Secondary line shown above the name, e.g. "Maybe:" or "online".
GlassContactPillsrc
string-
Avatar image source. When absent or it fails to load, the fallback is shown.
GlassContactPillfallback
React.ReactNode-
Avatar fallback content. Defaults to up-to-two initials from `name` (e.g. "YP").
GlassContactPillavatarPlacement
"top" | "leading""top"
Places the avatar peeking above the pill or inline at its leading edge.
GlassContactPilltrailing
React.ReactNode-
Optional trailing content after the label, e.g. a chevron or status dot.
GlassContactPillliquidProps
Omit<LiquidGlassProps, "children">-
Props forwarded to the underlying LiquidGlass surface (blur, refraction, bezel, saturation).
GlassContactPillsurfaceClassName
string-
Classes applied to the outer LiquidGlass surface.
GlassContactPill...props
Omit<React.ComponentProps<"div">, "title">-
Props from the underlying shadcn/ui primitive.