Streaming Text

1"use client";
2
3import { useState } from "react";
4import { StreamingText } from "@/registry/ui/streaming-text";
5import { Button } from "@/components/ui/button";
6
7const DEMO =
8  "Streaming text reveals word by word with an inline caret, useful for AI responses and onboarding copy.";
9
10export function StreamingTextDefaultExample() {
11  const [key, setKey] = useState(0);
12
13  return (
14    <div className="w-full max-w-xl space-y-4">
15      <Button variant="outline" onClick={() => setKey((k) => k + 1)}>
16        Restart
17      </Button>
18      <StreamingText
19        key={key}
20        content={DEMO}
21        isStreaming
22        speed={25}
23        className="rounded-lg border bg-card p-4"
24      />
25    </div>
26  );
27}