Inline Citation

Display inline citations with source previews in AI responses.

React is a JavaScript library for building user interfacesreact.dev +2, developed and maintained by Meta (formerly Facebook).

import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationCarousel,
  InlineCitationCarouselContent,
  InlineCitationCarouselHeader,
  InlineCitationCarouselIndex,
  InlineCitationCarouselItem,
  InlineCitationCarouselNext,
  InlineCitationCarouselPrev,
  InlineCitationSource,
  InlineCitationText,
} from "@/components/ai-elements/inline-citation"

export function InlineCitationDemo() {
  const sources = [
    "https://react.dev",
    "https://developer.mozilla.org",
    "https://www.typescriptlang.org",
  ]

  return (
    <div className="w-full max-w-2xl">
      <p className="text-sm leading-relaxed">
        <InlineCitation>
          <InlineCitationText>
            React is a JavaScript library for building user interfaces
          </InlineCitationText>
          <InlineCitationCard>
            <InlineCitationCardTrigger sources={sources} />
            <InlineCitationCardBody>
              <InlineCitationCarousel>
                <InlineCitationCarouselHeader>
                  <InlineCitationCarouselPrev />
                  <InlineCitationCarouselNext />
                  <InlineCitationCarouselIndex />
                </InlineCitationCarouselHeader>
                <InlineCitationCarouselContent>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="React Documentation"
                      url="https://react.dev"
                      description="The official React documentation provides comprehensive guides and API references for building user interfaces."
                    />
                  </InlineCitationCarouselItem>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="MDN Web Docs"
                      url="https://developer.mozilla.org"
                      description="Mozilla's comprehensive web development documentation covering HTML, CSS, JavaScript, and Web APIs."
                    />
                  </InlineCitationCarouselItem>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="TypeScript Docs"
                      url="https://www.typescriptlang.org"
                      description="Official TypeScript documentation and tutorials for learning typed JavaScript."
                    />
                  </InlineCitationCarouselItem>
                </InlineCitationCarouselContent>
              </InlineCitationCarousel>
            </InlineCitationCardBody>
          </InlineCitationCard>
        </InlineCitation>
        , developed and maintained by Meta (formerly Facebook).
      </p>
    </div>
  )
}

Installation

CLI

Manual


pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add inline-citation

Usage

import {
  InlineCitation,
  InlineCitationText,
  InlineCitationCard,
  InlineCitationCardTrigger,
  InlineCitationCardBody,
} from "@/components/ai-elements/inline-citation"

<InlineCitation>
  <InlineCitationText>Referenced text</InlineCitationText>
  <InlineCitationCard>
    <InlineCitationCardTrigger sources={["https://example.com"]} />
    <InlineCitationCardBody>
      {/* Citation content */}
    </InlineCitationCardBody>
  </InlineCitationCard>
</InlineCitation>

Examples

Default

React is a JavaScript library for building user interfacesreact.dev +2, developed and maintained by Meta (formerly Facebook).

import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationCarousel,
  InlineCitationCarouselContent,
  InlineCitationCarouselHeader,
  InlineCitationCarouselIndex,
  InlineCitationCarouselItem,
  InlineCitationCarouselNext,
  InlineCitationCarouselPrev,
  InlineCitationSource,
  InlineCitationText,
} from "@/components/ai-elements/inline-citation"

export function InlineCitationDemo() {
  const sources = [
    "https://react.dev",
    "https://developer.mozilla.org",
    "https://www.typescriptlang.org",
  ]

  return (
    <div className="w-full max-w-2xl">
      <p className="text-sm leading-relaxed">
        <InlineCitation>
          <InlineCitationText>
            React is a JavaScript library for building user interfaces
          </InlineCitationText>
          <InlineCitationCard>
            <InlineCitationCardTrigger sources={sources} />
            <InlineCitationCardBody>
              <InlineCitationCarousel>
                <InlineCitationCarouselHeader>
                  <InlineCitationCarouselPrev />
                  <InlineCitationCarouselNext />
                  <InlineCitationCarouselIndex />
                </InlineCitationCarouselHeader>
                <InlineCitationCarouselContent>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="React Documentation"
                      url="https://react.dev"
                      description="The official React documentation provides comprehensive guides and API references for building user interfaces."
                    />
                  </InlineCitationCarouselItem>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="MDN Web Docs"
                      url="https://developer.mozilla.org"
                      description="Mozilla's comprehensive web development documentation covering HTML, CSS, JavaScript, and Web APIs."
                    />
                  </InlineCitationCarouselItem>
                  <InlineCitationCarouselItem>
                    <InlineCitationSource
                      title="TypeScript Docs"
                      url="https://www.typescriptlang.org"
                      description="Official TypeScript documentation and tutorials for learning typed JavaScript."
                    />
                  </InlineCitationCarouselItem>
                </InlineCitationCarouselContent>
              </InlineCitationCarousel>
            </InlineCitationCardBody>
          </InlineCitationCard>
        </InlineCitation>
        , developed and maintained by Meta (formerly Facebook).
      </p>
    </div>
  )
}

const sources = [
  "https://react.dev",
  "https://developer.mozilla.org",
  "https://www.typescriptlang.org",
]
 
export default function Example() {
  return (
    <p>
      <InlineCitation>
        <InlineCitationText>
          React is a JavaScript library for building user interfaces
        </InlineCitationText>
        <InlineCitationCard>
          <InlineCitationCardTrigger sources={sources} />
          <InlineCitationCardBody>
            {/* Source previews */}
          </InlineCitationCardBody>
        </InlineCitationCard>
      </InlineCitation>
    </p>
  )
}

Features

Hover Preview: Shows source details on hover
Multiple Sources: Support for multiple citation sources
Carousel: Navigate between sources
Source Count: Displays number of sources

API Reference

InlineCitation

Container for inline citation.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

InlineCitationText

Cited text content.

Prop	Type	Default	Description
`className`	`string`	-	Custom CSS classes

InlineCitationCardTrigger

Trigger badge showing sources.

Prop	Type	Default	Description
`sources`	`string[]`	-	Array of source URLs
`className`	`string`	-	Custom CSS classes

Image Loader

On This Page

Installation Usage Examples Default Features API Reference InlineCitation InlineCitationText InlineCitationCardTrigger