ChatTypingIndicator

'use client';

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

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

Installation

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

Usage

Copyimport { ChatTypingIndicator } from '@/ui/ChatTypingIndicator';
 
export function Component() {
  return <ChatTypingIndicator />;
}

API Reference

ChatTypingIndicator

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.