Docs
Typing Indicator

Typing Indicator

A simple animated typing indicator component.

A minimal and elegant typing indicator component that shows three animated dots to indicate ongoing activity, commonly used in chat interfaces to show when someone is typing.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/typing-indicator.json

Usage

import { TypingIndicator } from "@/components/ui/typing-indicator"
 
type MessageProps = {
  isPending: boolean
  content: string
}
 
export function Message({ isPending, content }: MessageProps) {
  // ...
 
  return isPending ? <TypingIndicator /> : <p>{content}</p>
}