KQ-1270 · PLUG/IN

Plug In

A connect button with a plug on a cable: pressed, the plug lifts level and slides to the socket in the button's edge on the glide spring while its weighted cable first dips and then straightens, and while the connection is pending the plug works at the socket mouth in a seeded, uneven jiggle. When the integration answers, the plug seats on the snap spring with a clack, a seeded burst of sparks flies from the seam with a pop, the lamp lights and the label rolls to Connected; pressing again pulls the plug out on a tween and the cable recoils on the recoil spring's two bounces. The plug can be pushed in or pulled out by hand, following 1:1 and committing by where the throw would land, and the button is a native button in a group named for the integration: Enter and Space press it and Escape cancels a connection in flight.

KQ-1270 · PLUG/IN

Fieldline Calendar

Sync events both ways

not connected · press connect or push the plug in

Open it on the Studio stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/plug-in

Props

connected / defaultConnected: boolean; default false; Whether the integration is connected, controlled or initial. A controlled press reports through onConnectedChange and seats the plug once the host answers.
onConnectedChange: (connected: boolean) => void; default —; Each change, once its action has succeeded.
onConnect: (signal: AbortSignal) => void | Promise<unknown>; default —; Connects. Return a promise and the plug works at the socket until it settles; the signal aborts on Escape.
onDisconnect: (signal: AbortSignal) => void | Promise<unknown>; default —; Disconnects, the same way; the plug tugs at the socket while it waits.
state: "idle" | "pending" | "success" | "error"; default —; Controlled action state. Every move goes through onStateChange and waits for this.
onStateChange: (state: "idle" | "pending" | "success" | "error") => void; default —; Each action state, from the press, the answer or the timer that caused it.
slack: number; default 0.5; Spare cable, 0 to 1: a nearly taut line, or a deep loop that dips and swings when the plug moves.
spark: number; default 0.6; The contact's burst, 0 to 1: how many sparks and how far they fly. 0 is a clean connection.
jiggle: number; default 0.5; How hard the plug works at the socket while it connects, 0 to 1.
name: string; default "Integration"; What is being connected: the group's accessible name.
icon: ReactNode; default a block glyph; The integration's mark on the tile the cable comes from, 16px.
label: string; default "Connect"; The button's text while disconnected.
pendingLabel: string; default "Connecting"; The text while connecting.
connectedLabel: string; default "Connected"; The text once connected.
disconnectLabel: string; default "Disconnect"; What a connected button shows, in danger ink, on hover or keyboard focus: what a press will do.
errorLabel: string; default "Retry"; The text after a failure; a press tries again.
accent: string; default "var(--success)"; The live cable, the lamp and the connected face's tint. Any CSS colour.
successHold: number; default 1400; How long the contact holds as success before the button rests, in ms.
errorHold: number; default 2600; How long a failure holds before the button rests, in ms.
size: "sm" | "md" | "lg"; default "md"; 32, 40 or 48 px tall; the tile, cable, plug and sparks scale with it.
sound: boolean; default false; Play the clack of the plug seating and pulling out and the pop of the spark, only within a few seconds of the visitor's press or push. No audio context exists unless this is on.
disabled: boolean; default false; Dims and disables the button and the plug handle.
className: string; default —; Merged onto the group's classes.

Prop	Type	Default	Description
connected / defaultConnected	boolean	false	Whether the integration is connected, controlled or initial. A controlled press reports through onConnectedChange and seats the plug once the host answers.
onConnectedChange	(connected: boolean) => void	—	Each change, once its action has succeeded.
onConnect	(signal: AbortSignal) => void \| Promise<unknown>	—	Connects. Return a promise and the plug works at the socket until it settles; the signal aborts on Escape.
onDisconnect	(signal: AbortSignal) => void \| Promise<unknown>	—	Disconnects, the same way; the plug tugs at the socket while it waits.
state	"idle" \| "pending" \| "success" \| "error"	—	Controlled action state. Every move goes through onStateChange and waits for this.
onStateChange	(state: "idle" \| "pending" \| "success" \| "error") => void	—	Each action state, from the press, the answer or the timer that caused it.
slack	number	0.5	Spare cable, 0 to 1: a nearly taut line, or a deep loop that dips and swings when the plug moves.
spark	number	0.6	The contact's burst, 0 to 1: how many sparks and how far they fly. 0 is a clean connection.
jiggle	number	0.5	How hard the plug works at the socket while it connects, 0 to 1.
name	string	"Integration"	What is being connected: the group's accessible name.
icon	ReactNode	a block glyph	The integration's mark on the tile the cable comes from, 16px.
label	string	"Connect"	The button's text while disconnected.
pendingLabel	string	"Connecting"	The text while connecting.
connectedLabel	string	"Connected"	The text once connected.
disconnectLabel	string	"Disconnect"	What a connected button shows, in danger ink, on hover or keyboard focus: what a press will do.
errorLabel	string	"Retry"	The text after a failure; a press tries again.
accent	string	"var(--success)"	The live cable, the lamp and the connected face's tint. Any CSS colour.
successHold	number	1400	How long the contact holds as success before the button rests, in ms.
errorHold	number	2600	How long a failure holds before the button rests, in ms.
size	"sm" \| "md" \| "lg"	"md"	32, 40 or 48 px tall; the tile, cable, plug and sparks scale with it.
sound	boolean	false	Play the clack of the plug seating and pulling out and the pop of the spark, only within a few seconds of the visitor's press or push. No audio context exists unless this is on.
disabled	boolean	false	Dims and disables the button and the plug handle.
className	string	—	Merged onto the group's classes.