---
title: ChatTypingIndicator
description: An animated three-dot indicator shown while the AI assistant is composing a response.
---

```tsx
'use client';

import { ChatTypingIndicator } from '@/ui/ChatTypingIndicator';

export function ChatTypingIndicatorDemo() {
  return (
    <div className="flex flex-col gap-4 p-8">
      <ChatTypingIndicator />
    </div>
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/chat-typing-indicator.json
```

Or manually, copy the following code into `/ui/ChatTypingIndicator.tsx`:

```tsx
import { memo, type HTMLAttributes } from 'react';
import { twMerge } from '../helpers/twMerge';

export const ChatTypingIndicator = memo(function ChatTypingIndicator({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      role="status"
      aria-label="Typing"
      {...props}
      className={twMerge(
        'flex items-center gap-4 h-34 w-66 overflow-hidden rounded-pill bg-pearl px-20',
        className,
      )}
    >
      <span
        aria-hidden="true"
        className="size-6 rounded-full bg-black animate-bounce [animation-delay:-300ms]"
      />
      <span
        aria-hidden="true"
        className="size-6 rounded-full bg-black animate-bounce [animation-delay:-150ms]"
      />
      <span aria-hidden="true" className="size-6 rounded-full bg-black animate-bounce" />
    </div>
  );
});
```

## Usage

```tsx showLineNumbers
import { ChatTypingIndicator } from '@/ui/ChatTypingIndicator';

export function Component() {
  return <ChatTypingIndicator />;
}
```

## API Reference

### ChatTypingIndicator

| Prop        | Type     | Default     | Description                             |
| ----------- | -------- | ----------- | --------------------------------------- |
| `className` | `string` | `undefined` | Additional CSS classes to apply         |

Inherits all `HTMLDivElement` attributes.

## Notes

- Renders with `role="status"` and `aria-label="Typing"` for screen reader accessibility.
- The three dots animate with staggered delays to create a natural typing rhythm.
- Displayed inside a `ChatWindow` when `isTyping` is `true`.