Streaming text

Free · MIT

Text that is still arriving. Shows a caret while streaming, and announces politely so screen readers hear the finished text rather than every token.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/streaming-text

Brings in: utils

Usage

TSX · The example above

"use client"

import * as React from "react"
import { Button } from "@/components/ui/button"
import { ShimmerLabel, StreamingText } from "@/components/streaming-text"

const answer = "Your order shipped this morning and should arrive on Thursday. I’ve sent the tracking link to your email."

export default function Example() {
  const [n, setN] = React.useState(0)
  React.useEffect(() => {
    if (n >= answer.length) return
    const t = setTimeout(() => setN((v) => Math.min(answer.length, v + 3)), 30)
    return () => clearTimeout(t)
  }, [n])
  return (
    <div className="flex max-w-md flex-col gap-3">
      <ShimmerLabel>Looking up your order</ShimmerLabel>
      <StreamingText text={answer.slice(0, n)} streaming={n < answer.length} />
      <Button size="sm" variant="outline" className="w-fit" onClick={() => setN(0)}>
        Replay
      </Button>
    </div>
  )
}

<StreamingText>

Prop	Type	Default	Description
textrequired	`string`	—	The text so far.
streaming	`boolean \| undefined`	false	Show a caret while more is arriving; announced once when it stops.
className	`string \| undefined`	—	Extra classes for the outer element.

<ShimmerLabel>

A label that shimmers while an agent is working ("Thinking", "Reading the docs").

Prop	Type	Default	Description
childrenrequired	`React.ReactNode`	—	What goes inside.
className	`string \| undefined`	—	Extra classes for the outer element.