KQ-858 · SEND/SWOOSH

Send Swoosh

A composer whose send is felt. Pressing Send fires the arrow forward — fourteen pixels right and gone on the exit ease — and a fresh one returns from ten pixels behind on snap, one crisp overshoot into place; in the same moment the composer clears with a wipe, a clip inset sweeping the words away over an already-empty textarea. A status of sending holds the button dimmed under a ring, and failed wipes the text back in from the right, turns the button danger and puts the caret at the end. Enter sends, Shift+Enter breaks the line, and focus returns to the field on failure only when it was already inside the composer.

KQ-858 · SEND/SWOOSH

Ready · 0 sent

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/send-swoosh

Props

value / defaultValue: string; default ""; Controlled or initial composer text.
onValueChange: (text: string) => void; default —; Fires from every edit, the clear on send, and the return of the words on a failure.
status: "idle" | "sending" | "sent" | "failed"; default "idle"; The parent's report on the last send: sending holds the button, sent lets it go, failed returns the text.
onSend: (text: string) => void; default —; Fires from Enter or the Send button with the trimmed text.
placeholder: string; default "Message"; Composer placeholder.
label: string; default —; Names the composer for assistive technology.

Prop	Type	Default	Description
value / defaultValue	string	""	Controlled or initial composer text.
onValueChange	(text: string) => void	—	Fires from every edit, the clear on send, and the return of the words on a failure.
status	"idle" \| "sending" \| "sent" \| "failed"	"idle"	The parent's report on the last send: sending holds the button, sent lets it go, failed returns the text.
onSend	(text: string) => void	—	Fires from Enter or the Send button with the trimmed text.
placeholder	string	"Message"	Composer placeholder.
label	string	—	Names the composer for assistive technology.