Components
Loading preview...
Here is Response component
@ElevenLabs
npx shadcn@latest add https://21st.dev/r/ElevenLabs/response"use client"
import { useEffect, useState } from "react"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import rehypeHighlight from "rehype-highlight"
export default function Example() {
const tokens = [
"### Welcome",
"\n\n",
"This is a **rich markdown** showcase with multiple features.",
"\n\n---\n\n",
"## Data Table\n\n",
"| Name | Role | Status |\n",
"|------|------|--------|\n",
"| Alice | Engineer | Active |\n",
"| Bob | Designer | Active |\n",
"| Carol | PM | Active |\n\n",
"## Inspiration\n\n",
"> *Simplicity is the ultimate sophistication.*\n",
"> — Leonardo da Vinci\n\n",
"## Inline and Block Code\n\n",
"Use `let total = items.length` to count elements.\n\n",
"```python\n",
"def greet(name):\n",
" return f\"Hello, {name}!\"\n",
"print(greet(\"World\"))\n",
"```\n\n",
"## Math\n\n",
"Inline math: $a^2 + b^2 = c^2$.\n\n",
"Displayed equation:\n\n",
"$$\\\\int_0^1 x^2\\\\,dx = \\\\frac{1}{3}$$\n",
]
const [content, setContent] = useState("")
useEffect(() => {
let i = 0
let acc = ""
const id = setInterval(() => {
if (i < tokens.length) {
acc += tokens[i++]
setContent(acc)
} else {
clearInterval(id)
}
}, 100)
return () => clearInterval(id)
}, [])
return (
<div className="p-10 prose prose-invert max-w-none">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]}
>
{content}
</ReactMarkdown>
</div>
)
}