Chewypixel component
Typing Indicator
Three dots that bob in turn while someone is typing.
Installation
npx shadcn@latest add @chewypixel/typing-indicatorUsage
import { TypingIndicator } from "@/components/ui/typing-indicator";
export function Typing() {
return (
<span className="bg-muted text-muted-foreground flex h-9 w-fit items-center rounded-2xl px-4">
<TypingIndicator label="Sally is typing" />
</span>
);
}Props
labelWhat screen readers announce. The dots take the text color.
string = "Typing"
Released under the MIT License.
More components
- Emoji PickerA searchable emoji picker with categories and a preview of the emoji you're on.
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
- TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
- SwitchA switch whose thumb springs across when toggled and stretches while pressed.
See them in a real app
These components come from Bubblegum, our messenger template built with Next.js, shadcn/ui and Motion.