⚠️ Mobile is not supported yet.

Typing And Presence

component

A combined real-time typing + participant-presence strip for messaging/collaboration — presence (online/active/idle/away/offline/reconnecting) + typing (typing/recording/uploading/editing) by shape+text, avatar initials, overflow summary ("Three people are typing"), compact/inline/floating modes. App supplies all data; a debounced polite live region avoids keystroke spam; ambient motion pauses when hidden.

Provided by motiq

Open in

motion

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://motiq.dev/r/typing-and-presence.json"

Files

Styles

Light Mode

--color-accent:

#315fea

--color-accent-fg:

#ffffff

--color-accent-hover:

#244fd1

--color-accent-text:

#244fd1

--color-bg:

#f7f9fc

--color-bg-elevated:

#f0f4f9

--color-bg-secondary:

#f0f4f9

--color-border:

#dce4ef

--color-border-strong:

#c5d1e1

--color-code-bg:

--color-code-fg:

#2a3444

--color-error:

#d92d4a

--color-error-foreground:

#ffffff

--color-fg-secondary:

#344054

--color-focus:

#315fea

--color-info:

#087dbd

--color-info-foreground:

#ffffff

--color-muted:

#667085

--color-neutral:

#475467

--color-neutral-foreground:

#ffffff

--color-secondary-accent:

#009fb3

--color-signature:

#e9564a

--color-success:

#128a55

--color-success-foreground:

#ffffff

--color-surface:

#ffffff

--color-surface-2:

#f8fafd

--color-warning:

#b86e00

--color-warning-foreground:

#ffffff

Dark Mode

--color-accent:

#4f7cff

--color-accent-fg:

#080c14

--color-accent-hover:

#6f91ff

--color-accent-text:

#7f9fff

--color-bg:

#080c14

--color-bg-elevated:

#0d1420

--color-bg-secondary:

#0d1420

--color-border:

#263449

--color-border-strong:

#354863

--color-code-bg:

#0d1420

--color-code-fg:

#cbd5e1

--color-error:

#ff5c70

--color-error-foreground:

#2a0308

--color-fg:

#f8fafc

--color-fg-secondary:

#cbd5e1

--color-focus:

#4f7cff

--color-info:

#38bdf8

--color-info-foreground:

#04121f

--color-muted:

#9caabd

--color-neutral:

#b2bccd

--color-neutral-foreground:

#111827

--color-secondary-accent:

#22c7d9

--color-signature:

#ff6b5e

--color-success:

#32d583

--color-success-foreground:

#04150c

--color-surface:

#111827

--color-surface-2:

#192337

--color-warning:

#f6b94a

--color-warning-foreground:

#2a1a00

Theme

No variables found.

Typing And Presence

Installation

Files

components

Styles