Search

Search components and blocks

Sign in

Thinking Text

The shining 'agent is thinking' label. A light sweeps across the text on a loop while the status phrase changes every couple of seconds, crossfading into the next one. A pulsing dot trail and a live seconds counter sit beside it. Built on TextShimmer; the dot pulse stops under reduced motion.

pnpm dlx shadcn@latest add @ditherui/thinking-text
Thinking...0s

Install

$ pnpm dlx shadcn@latest add @ditherui/thinking-text

Props

phrasesstring[]["Thinking", "Reading the context", …]
showElapsedbooleantrue
intervalnumber2400
pausedbooleanfalse
className / ...div propsReact.ComponentProps<"div">—

When to use the thinking text

Use it as the label that shows an agent is thinking. A light sweeps across the text on a loop while the status phrase changes every couple of seconds.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components