Browse all components

Streaming Text

Typewriter-style streaming text with a blinking caret.

From AICSS ↗React, Vue & Svelte

Preview

Install

Choose your framework below and copy the source into your project. For React, place the component and its CSS Module in the same folder, then import the component where you need it.

Code

Open source ↗

StreamingText.tsx

"use client";

import styles from "./StreamingText.module.css";
import { useEffect, useState } from "react";

export function StreamingText({ text }: { text: string }) {
  const [shown, setShown] = useState("");
  useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i += 2;
      setShown(text.slice(0, i));
      if (i >= text.length) clearInterval(id);
    }, 9);
    return () => clearInterval(id);
  }, [text]);
  const streaming = shown.length < text.length;
  return (
    <p className={styles.prose}>
      {shown}
      <span className={streaming ? styles.caret + " " + styles.caretSteady : styles.caret} />
    </p>
  );
}

Copy both the component and its CSS Module into the same folder.

Related components

Code Block ↗

A code block with a language label and one-click copy button.

Comparison Table ↗

A feature-by-plan comparison matrix with checkmarks.

Data Table ↗

A tidy data table for structured comparisons and results.

Message Actions ↗

The action row under an assistant message: good response, bad response, copy, an emoji reaction, reply, and more.

Text Response ↗

Clean prose styling for a standard assistant answer with inline code.