KQ-1498 · LINE/CHIP

Line Chip

A call status chip with its actions inside. Ringing, the handset rings in bursts — a quick wiggle, then a rest — while sound arcs ripple out of it one after another and the border pulses, all from one linear cycle that runs only on screen. Answering slides the chip wider on springs.glide toward the measured width of the connected call, the actions riding the moving edge as a live timer and a waveform open beside the caller; hanging up turns the handset down on springs.snap, shakes the chip once and collapses it on glide to the call's duration with Call back inside. Every action is a real button reached with Tab and pressed with Enter or Space, and a polite status says each state once.

KQ-1498 · LINE/CHIP

Basinworks · support line

Mara LindIncoming call

incoming · mara lind

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/line-chip

Props

caller: string; default —; Who is on the line: shown in the chip (truncated, titled) and in every spoken sentence.
detail: string; default —; Replaces the line under the caller while it rings: a number, a team.
state / defaultState: "ringing" | "active" | "ended"; default — / "ringing"; Where the call is, controlled or uncontrolled.
onStateChange: (state: "ringing" | "active" | "ended") => void; default —; Fires from the action that moved the call on: Answer, Decline, Cancel, Hang up or Call back.
direction: "incoming" | "outgoing"; default "incoming"; Who placed the call: an incoming call offers Answer and Decline, an outgoing one only Cancel.
timer: number; default 0; Seconds already on the call when it connects (picked up elsewhere, or restored); the live timer counts on from here.
ripple: number; default 0.6; How hard it rings, 0 to 1: how many sound arcs ripple out of the handset (one to three) and how far it wiggles. 0 is a calm pulse.
muted / defaultMuted: boolean; default — / false; Whether the microphone is muted, controlled or uncontrolled; muted, the waveform lies flat and greys.
onMutedChange: (muted: boolean) => void; default —; Fires from the Mute button with the new state.
level: number; default —; The live audio level, 0 to 1, for the waveform. Without it the waveform plays a seeded voice with phrases and pauses.
labels: Partial<LineChipLabels>; default —; Every word the chip shows or says (incoming, outgoing, active, ended, declined, cancelled and the six actions), for other languages.
ringColor: string; default "var(--success)"; Ringing: the pulse, the arcs, the handset and Answer. Any CSS colour.
endColor: string; default "var(--danger)"; Decline, Cancel, Hang up and the ended handset. Any CSS colour.
size: "sm" | "md" | "lg"; default "md"; Chip height 40, 48 or 56px, with its disc and buttons.
sound: boolean; default false; Play a click on every action, a rising chime as the call connects and a low one as it ends; only ever in answer to a press.
disabled: boolean; default false; Disables every action.
className: string; default —; Classes for the root, which fills its width and centres the chip.

Prop	Type	Default	Description
caller	string	—	Who is on the line: shown in the chip (truncated, titled) and in every spoken sentence.
detail	string	—	Replaces the line under the caller while it rings: a number, a team.
state / defaultState	"ringing" \| "active" \| "ended"	— / "ringing"	Where the call is, controlled or uncontrolled.
onStateChange	(state: "ringing" \| "active" \| "ended") => void	—	Fires from the action that moved the call on: Answer, Decline, Cancel, Hang up or Call back.
direction	"incoming" \| "outgoing"	"incoming"	Who placed the call: an incoming call offers Answer and Decline, an outgoing one only Cancel.
timer	number	0	Seconds already on the call when it connects (picked up elsewhere, or restored); the live timer counts on from here.
ripple	number	0.6	How hard it rings, 0 to 1: how many sound arcs ripple out of the handset (one to three) and how far it wiggles. 0 is a calm pulse.
muted / defaultMuted	boolean	— / false	Whether the microphone is muted, controlled or uncontrolled; muted, the waveform lies flat and greys.
onMutedChange	(muted: boolean) => void	—	Fires from the Mute button with the new state.
level	number	—	The live audio level, 0 to 1, for the waveform. Without it the waveform plays a seeded voice with phrases and pauses.
labels	Partial<LineChipLabels>	—	Every word the chip shows or says (incoming, outgoing, active, ended, declined, cancelled and the six actions), for other languages.
ringColor	string	"var(--success)"	Ringing: the pulse, the arcs, the handset and Answer. Any CSS colour.
endColor	string	"var(--danger)"	Decline, Cancel, Hang up and the ended handset. Any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	Chip height 40, 48 or 56px, with its disc and buttons.
sound	boolean	false	Play a click on every action, a rising chime as the call connects and a low one as it ends; only ever in answer to a press.
disabled	boolean	false	Disables every action.
className	string	—	Classes for the root, which fills its width and centres the chip.