Accordion Generative

Component 21

About

An accordion whose panel reveals its answer text one character at a time, like an AI model streaming a response, complete with a trailing caret and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accordion Generative to your project and fits it to your theme.

Code

How Accordion Generative is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Sparkles } from "lucide-react";
import {
  Accordion,
  AccordionItem,
  AccordionStreamingContent,
  AccordionTrigger,
} from "@/components/ui/accordion-generative-utils/accordion";

const answers = [
  {
    value: "what",
    question: "What does this component do?",
    answer:
      "It streams the answer in one character at a time, the way a model writes it. The panel opens to the height of the finished text first, so nothing below it jumps while the words arrive.",
  },
  {
    value: "how",
    question: "How is the effect built?",
    answer:
      "A timer reveals a growing slice of the string while a caret trails the last character. The full text sits underneath at zero visibility to reserve the space, and it is the copy a screen reader reads.",
  },
  {
    value: "speed",
    question: "Can I change the pace?",
    answer:
      "Yes. Set speed for milliseconds per character and startDelay for the pause before the first word. Punctuation adds a beat on its own, and a reduced-motion preference skips straight to the finished answer.",
  },
];

export default function AccordionGenerativeDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <Accordion
        type="single"
        collapsible
        variant="card"
        defaultValue="what"
        className="w-full max-w-lg"
      >
        {answers.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>
              <span className="flex items-center gap-2.5">
                <Sparkles
                  aria-hidden="true"
                  className="size-4 shrink-0 text-violet-500 dark:text-violet-400"
                  strokeWidth={2}
                />
                {item.question}
              </span>
            </AccordionTrigger>
            <AccordionStreamingContent text={item.answer} speed={12} />
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}