TypingIndicator

Animated bouncing dots indicator showing that one or more users are currently typing, with automatic text formatting.

View source Installation

Preview

No Users

Single User

Alice is typing

Two Users

Alice and Bob are typing

Multiple Users

Alice and 2 others are typing

Import

import { TypingIndicator } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
users	`string[]`	`[]`	Names of users who are typing.

Examples

Single User

import { TypingIndicator } from '@velocityuikit/velocityui'

export default function Example() {
  return <TypingIndicator users={['Alice']} />
}

Multiple Users

import { TypingIndicator } from '@velocityuikit/velocityui'

export default function Example() {
  return <TypingIndicator users={['Alice', 'Bob']} />
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */