KQ-901 · CALL/BAR

Call Bar

A call, ongoing, in the header. The bar lives in flow: a wrapper glides its ResizeObserver-measured height from zero on glide while the row rides down from 8px, so a call arriving pushes the thread rather than covering it. Ringing pulses a halo behind Join on a repeating tween; joining stops it, swaps to a plain Leave, and starts an elapsed figure held in one linearly driven motion value that pauses with the tab. Escape declines a ringing call but never hangs up a joined one.

KQ-901 · CALL/BAR

Coldbrook depotRinging · 2 people waiting

No call

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/call-bar

Props

state / defaultState: "none" | "ringing" | "joined"; default "none"; Controlled or initial call state.
onStateChange: (state: CallState) => void; default —; Fires from Join, Decline and Leave.
title: string; default —; The room or caller the call belongs to; shown and spoken.
participants: string[]; default []; Names already in the call; drives the count sentence and the disc.
startSeconds: number; default 0; Seconds already elapsed when the bar joins.
onElapsedChange: (seconds: number) => void; default —; Fires once per whole second while joined.
onJoin: () => void; default —; Fires after the state settles on joined.
onLeave: (seconds: number) => void; default —; Fires after the state settles on none, with the run's final seconds.
joinLabel: string; default "Join"; Copy on the primary control while ringing.
disabled: boolean; default false; Holds both controls; a running call still counts and still reads.

Prop	Type	Default	Description
state / defaultState	"none" \| "ringing" \| "joined"	"none"	Controlled or initial call state.
onStateChange	(state: CallState) => void	—	Fires from Join, Decline and Leave.
title	string	—	The room or caller the call belongs to; shown and spoken.
participants	string[]	[]	Names already in the call; drives the count sentence and the disc.
startSeconds	number	0	Seconds already elapsed when the bar joins.
onElapsedChange	(seconds: number) => void	—	Fires once per whole second while joined.
onJoin	() => void	—	Fires after the state settles on joined.
onLeave	(seconds: number) => void	—	Fires after the state settles on none, with the run's final seconds.
joinLabel	string	"Join"	Copy on the primary control while ringing.
disabled	boolean	false	Holds both controls; a running call still counts and still reads.