InlineCitation

Inline source pill that previews citations on hover.

InlineCitation marks a sourced claim without breaking the reading flow: the text reads normally, a small mono pill carries the source site’s favicon and hostname, and hovering or focusing the pill previews the source — favicon, title, URL, description, and an optional quote — right in the paragraph. The pill is a real link, so a click goes to the source. Favicons resolve through Google’s favicon service and vanish silently when unavailable, so the pill never shows a broken image.

Multiple sources stack in one readable list inside the preview. That’s a deliberate departure from carousel-style citation cards: reading beats paging.

Inspired by Inline Citation from Vercel’s AI SDK Elements, rebuilt on Base UI in the registry’s own vocabulary.

Neon separates storage from compute, so a branch shares its parent's data until either side diverges — creating one is a copy-on-write operation, not a copy neon.com. Idle computes suspend automatically and resume in well under a second, which is what makes per-tenant databases economical neon.com.

"use client";

import { citations, citedContent } from "./fixtures";
import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationQuote,
  InlineCitationSource,
  InlineCitationText,
} from "./inline-citation";

const MARKER = /(?<marker>\[\d+\])/u;
const MARKER_NUMBER = /\[(?<number>\d+)\]/u;

export const InlineCitationDemo = () => (
  <p className="max-w-md text-sm leading-relaxed">
    {citedContent.split(MARKER).map((part, index) => {
      const number = MARKER_NUMBER.exec(part)?.groups?.number;
      const citation = citations.find((entry) => entry.number === number);

      if (!citation) {
        return (
          <InlineCitation key={`${part.slice(0, 16)}-${index.toString()}`}>
            <InlineCitationText>{part}</InlineCitationText>
          </InlineCitation>
        );
      }

      return (
        <InlineCitationCard key={citation.number}>
          <InlineCitationCardTrigger sources={[citation.url]} />
          <InlineCitationCardBody>
            <InlineCitationSource
              description={citation.description}
              title={citation.title}
              url={citation.url}
            />
            {citation.quote ? (
              <InlineCitationQuote>{citation.quote}</InlineCitationQuote>
            ) : null}
          </InlineCitationCardBody>
        </InlineCitationCard>
      );
    })}
  </p>
);

export default InlineCitationDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/inline-citation.json

Usage

import {
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationSource,
} from "@/components/neon-ui/inline-citation";

<InlineCitationCard>
  <InlineCitationCardTrigger
    sources={["https://neon.com/docs/introduction/branching"]}
  />
  <InlineCitationCardBody>
    <InlineCitationSource
      title="Branching — Neon Docs"
      url="https://neon.com/docs/introduction/branching"
      description="How branches share pages with their parent."
    />
  </InlineCitationCardBody>
</InlineCitationCard>;

Wiring to Neon

Models don’t emit citation markup natively, so generate structured output — a { content, citations } schema via experimental_useObject — and split the content on [n] markers. The typed example shows the full parse-and-render pass; markers with a matching source become pills, everything else stays prose.

Source URLs. The first is the link target and names the pill; extras show as a +n tail.

Typestring[]

`<InlineCitationCardBody />`

PropType

align?"start" | "center" | "end"

Popup alignment against the pill.

Type"start" | "center" | "end"

Default"start"

sideOffset?number

Gap between pill and popup.

Typenumber

Default6

`<InlineCitationSource />`

PropType

title?string

The title of the source.

Typestring

url?string

The URL of the source, shown in mono.

Typestring

description?string

A brief dimmed description.

Typestring

`<InlineCitationQuote />`

A blockquote for a short excerpt, on the house rail.

Accessibility

The pill is a real anchor: focusable, opens the preview on focus, and navigates on activation.
Built on Base UI PreviewCard: Esc dismisses, and the preview never traps focus.
The preview duplicates what hover shows, so keyboard users get the same information.
The popup’s entrance is a fade only and is removed under prefers-reduced-motion.

InlineCitation

Install

Usage

Wiring to Neon

Props

`<InlineCitation />` and `<InlineCitationText />`

`<InlineCitationCard />`

`<InlineCitationCardTrigger />`

`<InlineCitationCardBody />`

`<InlineCitationSource />`

`<InlineCitationQuote />`

Accessibility