InlineCitation

Overview

InlineCitation é a versão inline do Sources — ao invés de listar fontes no fim, embute citations no texto: "tokens usam Tailwind v4 [1]". Hover/click no número abre um HoverCard com a fonte completa.

Combina muito bem com Streamdown: você pode renderizar citation refs no markdown e converter em InlineCitation via custom components.

Anatomy

<InlineCitation>
  ├─ <InlineCitationText>texto destacado</InlineCitationText>
  └─ <InlineCitationCard>
       ├─ <InlineCitationCardTrigger sources={[urls]} />
       └─ <InlineCitationCardBody>
            <InlineCitationCarousel>
              <InlineCitationCarouselContent>
                <InlineCitationCarouselItem>
                  <InlineCitationCarouselHeader>...
                  <InlineCitationSource>...
                  <InlineCitationQuote>...
</InlineCitation>

Usage

<p>
  Tokens usam Tailwind v4{" "}
  <InlineCitation>
    <InlineCitationText>[1]</InlineCitationText>
    <InlineCitationCard>
      <InlineCitationCardTrigger sources={["https://tailwindcss.com/docs/theme"]} />
      <InlineCitationCardBody>
        <p>Tailwind docs sobre theme directive.</p>
      </InlineCitationCardBody>
    </InlineCitationCard>
  </InlineCitation>.
</p>

Props

InlineCitation (Root)

Aceita ComponentProps<"span">. Wrapper inline.

InlineCitationText

Aceita ComponentProps<"span">. Texto destacado (em geral o número da citation entre colchetes).

InlineCitationCard

Aceita ComponentProps<typeof HoverCard>. Wrapper do HoverCard trigger + content.

InlineCitationCardTrigger

Herda de Badge.

InlineCitationCardBody

Aceita ComponentProps<"div">. Conteúdo do HoverCard — pode incluir o Carousel pra múltiplas fontes.

Carousel components

Subcomponents

• InlineCitation — root inline (<span>).
• InlineCitationText — destaque do texto da citation.
• InlineCitationCard — HoverCard que abre on hover.
• InlineCitationCardTrigger — Badge clicável com domain do primeiro source (útil pra preview compacto).
• InlineCitationCardBody — conteúdo do HoverCard.
• InlineCitationCarousel + filhos — quando há múltiplas fontes pra mesma citation, navegação por carrossel.
• InlineCitationSource + InlineCitationQuote — link e trecho citado dentro do carousel item.

When to use

• Respostas com RAG citando fontes específicas inline.
• Markdown rendering com refs [1], [2] que viram citations.
• Documentation generation onde claims precisam de evidência inline.

When not to use

• Lista de fontes no fim — use Sources.
• Tooltip de termo (definição) — use HoverCard diretamente sem o wrapper InlineCitation.

Best practices

• Numeração consistente. [1], [2], [3] na ordem de aparição no texto.
• Sources lista no fim. InlineCitation inline + Sources no fim é o padrão clássico de RAG.
• Domain-only no trigger. O trigger compacto deve mostrar só o domain ("tailwindcss.com"), não a URL inteira.

Accessibility

Related

• Sources — lista colapsável de fontes no fim.
• HoverCard — base subjacente.
• Badge — base do trigger.
• Carousel — base do carousel.