Call Chip

An incoming-call pill with pulsing rings that expands into accept and decline, then morphs into a live call timer.

name

subtitle

acceptColor

declineColor

resetDelay2500

Installation

npx shadcn@latest add @glint-ui/call-chip

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/call-chip.json

Usage

import { CallChip } from "@/components/ui/call-chip";

<CallChip
  name="Maya Chen"
  onAccept={() => join()}
  onDecline={() => reject()}
  onEnd={(seconds) => log(seconds)}
/>

Props

Prop	Type	Default	Description
name	string	"Maya Chen"	Caller name.
subtitle	string	"Incoming call"	Line under the name while ringing.
acceptColor	string	"#22c55e"	Accept button and live-call accent.
declineColor	string	"#ef4444"	Decline and hang-up color.
resetDelay	number	2500	Ms after ending before it rings again (0 = stay ended).
avatar	ReactNode	—	Optional avatar image URL; initials are used otherwise.
onAccept	ReactNode	—	Called when the call is accepted.
onDecline	ReactNode	—	Called when the call is declined.
onEnd	ReactNode	—	Called with the call length in seconds after hanging up.
className	string	—	Extra classes for the root element.