Inline Citation

AI chats 6

About

A numbered reference inside prose with an inspectable source preview.

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

Code

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

Usage.tsx

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>
  )
}