Skip to content

Inline Citation

A chip after the sentence it supports. Hover it with a mouse, or tap or press it, to see the sources.

Sourcecomponents/inline-citation.tsx

A pricing table should have header cells and a caption. Its buttons should still be easy to press on a phone.

Usage

Inline Citation usage
import { InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationCarousel, InlineCitationCarouselContent, InlineCitationCarouselHeader, InlineCitationCarouselIndex, InlineCitationCarouselItem, InlineCitationCarouselNext, InlineCitationCarouselPrev, InlineCitationQuote, InlineCitationSource, InlineCitationText } from "@/components/inline-citation";
export function InlineCitationUsage({ sources }: { sources: { url: string; title: string; quote: string }[] }) {  return (    <p>      <InlineCitation>        <InlineCitationText>Every table needs a caption.</InlineCitationText>        <InlineCitationCard>          <InlineCitationCardTrigger sources={sources.map((source) => source.url)} />          <InlineCitationCardBody>            <InlineCitationCarousel>              <InlineCitationCarouselHeader>                <InlineCitationCarouselPrev />                <InlineCitationCarouselIndex />                <InlineCitationCarouselNext />              </InlineCitationCarouselHeader>              <InlineCitationCarouselContent>                {sources.map((source) => (                  <InlineCitationCarouselItem key={source.url}>                    <InlineCitationSource title={source.title} url={source.url} />                    <InlineCitationQuote>{source.quote}</InlineCitationQuote>                  </InlineCitationCarouselItem>                ))}              </InlineCitationCarouselContent>            </InlineCitationCarousel>          </InlineCitationCardBody>        </InlineCitationCard>      </InlineCitation>    </p>  );}

When to use

Use when

A chip after a sentence naming its source ("example.com +2"); hover, tap or press opens the sources, in a carousel when there are several

Don’t use when

The full list of sources (use Sources); a link the reader should follow (use Link)