Typing Dots

A compact typing indicator pill — the pattern every chat UI needs, without pulling in a full messaging library.

chattypingloadingmessaging

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { TypingDots } from "@/registry/components/typing-dots";

export function Example() {
  return <TypingDots />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Shimmer Text

A loading-state text treatment that animates a light sweep through a background-clipped gradient. Useful for streaming AI responses.

Thinking Orbs

Three staggered dots for agent and AI chat loading states. Lightweight CSS keyframes with a reduced-motion opt-out.