Typing

import { Typing } from "@/components/loading-ui/typing";

export function TypingDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/typing
Copy

Usage

Copyimport { Typing } from "@/components/loading-ui/typing";

Copy<Typing />

Customization

Typing animates translateY with a short period so each dot feels like it is tapping upward in sequence. Color flows through bg-current and inherited foreground. Cycle length is driven by --duration (default 1s); delay steps stay at 160ms per index.

Size

Widen the container for calmer motion; keep rows tight next to baseline text.

import { Typing } from "@/components/loading-ui/typing";

export function TypingSize() {

Color

Vivid hex swatches for documentation clarity.

import { Typing } from "@/components/loading-ui/typing";

export function TypingColor() {

Duration

Faster reads as rapid typing; slower feels more relaxed or “thinking.”

import { Typing } from "@/components/loading-ui/typing";

export function TypingDuration() {

Dot count

Match the density of your message chrome—three is the usual chat default.

import { Typing } from "@/components/loading-ui/typing";

export function TypingCount() {

Examples

Bias examples toward text and presence: disabled buttons that mirror chat copy, accordion headers for collaborators, command inputs, and tooltips that explain live editors.

Button

Disabled state sells “read-only until idle” without swapping components.

import { Button } from "@/components/ui/button";
import { Typing } from "@/components/loading-ui/typing";

Badge

Great for omnibar, doc header, or thread list chips.

import { Badge } from "@/components/ui/badge";
import { Typing } from "@/components/loading-ui/typing";

Accordion

Stack typing motion with a participant list in the panel body.

import {
  Accordion,
  AccordionContent,

Input group

Leading addon slot mirrors command palettes and search-as-you-type rows.

import {
  InputGroup,
  InputGroupAddon,

Tooltip

Contrast the dots against the tooltip surface with text-background when needed.

import { Button } from "@/components/ui/button";
import {
  Tooltip,