A numbered reference inside prose with an inspectable source preview.
import { useState } from 'react'
import InlineCitation from '@/components/ui/inline-citation'
export default function Demo() {
const [open, setOpen] = useState(true)
return (
<div data-demo-stage className="flex min-h-[360px] w-full items-center justify-center p-8">
<p className="w-full max-w-lg pt-40 pb-4 text-sm leading-7 font-[450] tracking-[-0.05px] text-muted-foreground">
Agent products repeatedly need approval, recovery, execution state, and durable output
<InlineCitation
className="mx-1"
excerpt="Most agent libraries concentrate on the message surface while application teams rebuild operational UI."
index={1}
onOpenChange={setOpen}
open={open}
source="Pasta UI registry audit · Sep 2026"
title="Agent interface opportunity"
/>
—which makes complete workflow components a stronger differentiator.
</p>
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.