React AI Inline Citation

Academic-style inline citations with hover details. Build credible AI content with React, Next.js, and TypeScript, featuring source carousels and contextual information for shadcn/ui applications.

AI Elements

Radix UI

Embla Carousel

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Academic-style citations for AI content that needs to show sources and build trust. Hover to see source details, navigate between multiple sources, and give users a way to verify claims in React applications.

Inline citation with sources

Citation badges with hover details and source carousel:

Loading component...

'use client';import {  InlineCitation,  InlineCitationCard,  InlineCitationCardBody,  InlineCitationCardTrigger,  InlineCitationCarousel,  InlineCitationCarouselContent,  InlineCitationCarouselHeader,  InlineCitationCarouselIndex,  InlineCitationCarouselItem,  InlineCitationCarouselNext,  InlineCitationCarouselPrev,  InlineCitationSource,  InlineCitationText,} from '@/components/ui/shadcn-io/ai/inline-citation';const citation = {  text: 'The technology continues to evolve rapidly, with new breakthroughs being announced regularly',  sources: [    {      title: 'AI SDK Documentation',      url: 'https://sdk.vercel.ai/',      description: 'The AI Toolkit for TypeScript developers',    },    {      title: 'OpenAI Research',      url: 'https://openai.com/research',      description: 'Latest research in artificial intelligence',    },    {      title: 'Vercel AI SDK',      url: 'https://github.com/vercel/ai',      description: 'Build AI-powered applications with React',    },  ],};const Example = () => {  return (    <div className="flex justify-center p-8">      <p className="text-sm leading-relaxed max-w-2xl">        According to recent studies, artificial intelligence has shown remarkable        progress in natural language processing.{' '}        <InlineCitation>          <InlineCitationText>{citation.text}</InlineCitationText>          <InlineCitationCard>            <InlineCitationCardTrigger              sources={citation.sources.map((source) => source.url)}            />            <InlineCitationCardBody>              <InlineCitationCarousel>                <InlineCitationCarouselHeader>                  <InlineCitationCarouselPrev />                  <InlineCitationCarouselNext />                  <InlineCitationCarouselIndex />                </InlineCitationCarouselHeader>                <InlineCitationCarouselContent>                  {citation.sources.map((source) => (                    <InlineCitationCarouselItem key={source.url}>                      <InlineCitationSource                        description={source.description}                        title={source.title}                        url={source.url}                      />                    </InlineCitationCarouselItem>                  ))}                </InlineCitationCarouselContent>              </InlineCitationCarousel>            </InlineCitationCardBody>          </InlineCitationCard>        </InlineCitation>        .      </p>    </div>  );};export default Example;

'use client';import { Badge } from '@/components/ui/badge';import {  Carousel,  CarouselContent,  CarouselItem,  type CarouselApi,} from '@/components/ui/carousel';import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from '@/components/ui/hover-card';import { cn } from '@/lib/utils';import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';import { type ComponentProps, useCallback, useEffect, useState, useRef, createContext, useContext } from 'react';// Context to share carousel API with child componentsconst CarouselApiContext = createContext<CarouselApi | undefined>(undefined);// Hook to access carousel API from the nearest InlineCitationCarousel parentconst useCarouselApi = () => {  const api = useContext(CarouselApiContext);  return api;};export type InlineCitationProps = ComponentProps<'span'>;export const InlineCitation = ({  className,  ...props}: InlineCitationProps) => (  <span    className={cn('group inline items-center gap-1', className)}    {...props}  />);export type InlineCitationTextProps = ComponentProps<'span'>;export const InlineCitationText = ({  className,  ...props}: InlineCitationTextProps) => (  <span    className={cn('transition-colors group-hover:bg-accent', className)}    {...props}  />);export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;export const InlineCitationCard = (props: InlineCitationCardProps) => (  <HoverCard closeDelay={0} openDelay={0} {...props} />);export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {  sources: string[];};export const InlineCitationCardTrigger = ({  sources,  className,  ...props}: InlineCitationCardTriggerProps) => (  <HoverCardTrigger asChild>    <Badge      className={cn('ml-1 rounded-full', className)}      variant="secondary"      {...props}    >      {sources.length ? (        <>          {new URL(sources[0]).hostname}{' '}          {sources.length > 1 && `+${sources.length - 1}`}        </>      ) : (        'unknown'      )}    </Badge>  </HoverCardTrigger>);export type InlineCitationCardBodyProps = ComponentProps<'div'>;export const InlineCitationCardBody = ({  className,  ...props}: InlineCitationCardBodyProps) => (  <HoverCardContent className={cn('relative w-80 p-0', className)} {...props} />);export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;export const InlineCitationCarousel = ({  className,  children,  ...props}: InlineCitationCarouselProps) => {  const [api, setApi] = useState<CarouselApi>();    return (    <CarouselApiContext.Provider value={api}>      <Carousel         className={cn('w-full', className)}         setApi={setApi}        {...props}       >        {children}      </Carousel>    </CarouselApiContext.Provider>  );};export type InlineCitationCarouselContentProps = ComponentProps<'div'>;export const InlineCitationCarouselContent = (  props: InlineCitationCarouselContentProps) => <CarouselContent {...props} />;export type InlineCitationCarouselItemProps = ComponentProps<'div'>;export const InlineCitationCarouselItem = ({  className,  ...props}: InlineCitationCarouselItemProps) => (  <CarouselItem className={cn('w-full space-y-2 p-4', className)} {...props} />);export type InlineCitationCarouselHeaderProps = ComponentProps<'div'>;export const InlineCitationCarouselHeader = ({  className,  ...props}: InlineCitationCarouselHeaderProps) => (  <div    className={cn(      'flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2',      className    )}    {...props}  />);export type InlineCitationCarouselIndexProps = ComponentProps<'div'>;export const InlineCitationCarouselIndex = ({  children,  className,  ...props}: InlineCitationCarouselIndexProps) => {  const api = useCarouselApi();  const [current, setCurrent] = useState(0);  const [count, setCount] = useState(0);  useEffect(() => {    if (!api) {      return;    }    setCount(api.scrollSnapList().length);    setCurrent(api.selectedScrollSnap() + 1);    api.on('select', () => {      setCurrent(api.selectedScrollSnap() + 1);    });  }, [api]);  return (    <div      className={cn(        'flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs',        className      )}      {...props}    >      {children ?? `${current}/${count}`}    </div>  );};export type InlineCitationCarouselPrevProps = ComponentProps<'button'>;export const InlineCitationCarouselPrev = ({  className,  ...props}: InlineCitationCarouselPrevProps) => {  const api = useCarouselApi();  const handleClick = useCallback(() => {    if (api) {      api.scrollPrev();    }  }, [api]);  return (    <button      aria-label="Previous"      className={cn('shrink-0', className)}      onClick={handleClick}      type="button"      {...props}    >      <ArrowLeftIcon className="size-4 text-muted-foreground" />    </button>  );};export type InlineCitationCarouselNextProps = ComponentProps<'button'>;export const InlineCitationCarouselNext = ({  className,  ...props}: InlineCitationCarouselNextProps) => {  const api = useCarouselApi();  const handleClick = useCallback(() => {    if (api) {      api.scrollNext();    }  }, [api]);  return (    <button      aria-label="Next"      className={cn('shrink-0', className)}      onClick={handleClick}      type="button"      {...props}    >      <ArrowRightIcon className="size-4 text-muted-foreground" />    </button>  );};export type InlineCitationSourceProps = ComponentProps<'div'> & {  title?: string;  url?: string;  description?: string;};export const InlineCitationSource = ({  title,  url,  description,  className,  children,  ...props}: InlineCitationSourceProps) => (  <div className={cn('space-y-1', className)} {...props}>    {title && (      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>    )}    {url && (      <p className="truncate break-all text-muted-foreground text-xs">{url}</p>    )}    {description && (      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">        {description}      </p>    )}    {children}  </div>);export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;export const InlineCitationQuote = ({  children,  className,  ...props}: InlineCitationQuoteProps) => (  <blockquote    className={cn(      'border-muted border-l-2 pl-3 text-muted-foreground text-sm italic',      className    )}    {...props}  >    {children}  </blockquote>);

Shows source hostnames with counts, reveals detailed info on hover, and provides carousel navigation for multiple sources in TypeScript components. Works with any citation format—just pass URLs and metadata.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationCarousel,
  InlineCitationCarouselContent,
  InlineCitationCarouselItem,
  InlineCitationSource,
  InlineCitationText,
} from "@/components/ai/inline-citation";

<InlineCitation>
  <InlineCitationText>This text has a citation</InlineCitationText>
  <InlineCitationCard>
    <InlineCitationCardTrigger sources={["https://example.com"]} />
    <InlineCitationCardBody>
      <InlineCitationCarousel>
        <InlineCitationCarouselContent>
          <InlineCitationCarouselItem>
            <InlineCitationSource
              title="Example Source"
              url="https://example.com"
              description="A reliable source"
            />
          </InlineCitationCarouselItem>
        </InlineCitationCarouselContent>
      </InlineCitationCarousel>
    </InlineCitationCardBody>
  </InlineCitationCard>
</InlineCitation>;

Why not just show links at the bottom?

Most AI apps dump source links at the end like an afterthought in React applications. Users can't tell which claim comes from which source. Inline citations connect claims to sources immediately.

Academic papers figured this out decades ago. The [1] format lets readers verify specific claims without losing their place in the content in Next.js projects.

Usage with Vercel AI SDK

Generate cited content using Vercel AI SDK's experimental_useObject for structured citation data in React applications:

"use client";

import { experimental_useObject as useObject } from "@ai-sdk/react";
import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardTrigger,
  InlineCitationCardBody,
  InlineCitationCarousel,
  InlineCitationCarouselContent,
  InlineCitationCarouselItem,
  InlineCitationCarouselHeader,
  InlineCitationCarouselIndex,
  InlineCitationSource,
  InlineCitationQuote,
} from "@/components/ai/inline-citation";
import { Button } from "@/components/ui/button";
import { z } from "zod";

const citationSchema = z.object({
  content: z.string(),
  citations: z.array(
    z.object({
      number: z.string(),
      title: z.string(),
      url: z.string(),
      description: z.string().optional(),
      quote: z.string().optional(),
    })
  ),
});

export default function CitationDemo() {
  const { object, submit, isLoading } = useObject({
    api: "/api/citation",
    schema: citationSchema,
  });

  return (
    <div className="space-y-4">
      <Button
        onClick={() => submit({ prompt: "artificial intelligence" })}
        disabled={isLoading}
      >
        Generate AI Content
      </Button>

      {object?.content && (
        <div className="prose max-w-none">
          <p>
            {object.content.split(/(\[\d+\])/).map((part, index) => {
              const citationMatch = part.match(/\[(\d+)\]/);
              if (citationMatch) {
                const citationNumber = citationMatch[1];
                const citation = object.citations?.find(
                  (c) => c.number === citationNumber
                );

                if (citation) {
                  return (
                    <InlineCitation key={index}>
                      <InlineCitationCard>
                        <InlineCitationCardTrigger sources={[citation.url]} />
                        <InlineCitationCardBody>
                          <InlineCitationCarousel>
                            <InlineCitationCarouselHeader>
                              <InlineCitationCarouselIndex />
                            </InlineCitationCarouselHeader>
                            <InlineCitationCarouselContent>
                              <InlineCitationCarouselItem>
                                <InlineCitationSource
                                  title={citation.title}
                                  url={citation.url}
                                  description={citation.description}
                                />
                                {citation.quote && (
                                  <InlineCitationQuote>
                                    {citation.quote}
                                  </InlineCitationQuote>
                                )}
                              </InlineCitationCarouselItem>
                            </InlineCitationCarouselContent>
                          </InlineCitationCarousel>
                        </InlineCitationCardBody>
                      </InlineCitationCard>
                    </InlineCitation>
                  );
                }
              }
              return part;
            })}
          </p>
        </div>
      )}
    </div>
  );
}

Backend schema for citation generation:

// app/api/citation/route.ts
import { streamObject } from "ai";
import { z } from "zod";

const citationSchema = z.object({
  content: z.string(),
  citations: z.array(
    z.object({
      number: z.string(),
      title: z.string(),
      url: z.string(),
      description: z.string().optional(),
      quote: z.string().optional(),
    })
  ),
});

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = streamObject({
    model: "openai/gpt-4o",
    schema: citationSchema,
    prompt: `Generate content about ${prompt} with proper citations marked as [1], [2], etc.`,
  });

  return result.toTextStreamResponse();
}

Features

Hover cards that don't break on mobile (click also works) in React applications
Carousel navigation for multiple sources per citation in Next.js projects
Shows hostname and source count in badges with TypeScript support
Optional quote blocks for relevant excerpts
Keyboard navigation between sources in JavaScript implementations
Works with any Vercel AI SDK setup in modern React frameworks
Free open source component designed for research AI, fact-checking, and credible content generation

API Reference

InlineCitation

Container for citation text and card.

Prop	Type	Description
`...props`	`ComponentProps<'span'>`	Spreads to root span element

InlineCitationText

Styled text that shows hover effects.

Prop	Type	Description
`...props`	`ComponentProps<'span'>`	Spreads to span element

InlineCitationCard

Hover card container for citation details.

Prop	Type	Description
`...props`	`ComponentProps<typeof HoverCard>`	Spreads to HoverCard component

InlineCitationCardTrigger

Badge trigger showing source hostname and count.

Prop	Type	Description
`sources`	`string[]`	Required - Array of source URLs
`...props`	`ComponentProps<typeof Badge>`	Spreads to Badge component

InlineCitationCardBody

Content container for citation details.

Prop	Type	Description
`...props`	`ComponentProps<'div'>`	Spreads to div element

InlineCitationCarousel

Carousel for navigating multiple citations.

Prop	Type	Description
`...props`	`ComponentProps<typeof Carousel>`	Spreads to Carousel component

InlineCitationCarouselContent

Content wrapper for carousel items.

Prop	Type	Description
`...props`	`ComponentProps<'div'>`	Spreads to CarouselContent

InlineCitationCarouselItem

Individual citation item in carousel.

Prop	Type	Description
`...props`	`ComponentProps<'div'>`	Spreads to CarouselItem

InlineCitationSource

Source information display.

Prop	Type	Description
`title`	`string`	Source title
`url`	`string`	Source URL
`description`	`string`	Source description
`...props`	`ComponentProps<'div'>`	Spreads to div element

InlineCitationQuote

Styled blockquote for excerpts.

Prop	Type	Description
`...props`	`ComponentProps<'blockquote'>`	Spreads to blockquote element

Keyboard interactions

Key	Description
`Tab`	Focus citation trigger
`Enter` / `Space`	Open citation card
`Escape`	Close citation card
`ArrowLeft` / `ArrowRight`	Navigate carousel

Citation gotchas that will bite you

Invalid URLs break hostname extraction: The badge shows the hostname from the URL in React applications. Bad URLs will show 'unknown' or crash the component.

Too many sources overwhelm users: Keep it to 3-5 sources per citation max in Next.js projects. More than that and nobody reads them.

Mobile hover doesn't work: Hover cards fail on touch devices in JavaScript implementations. This component supports click, but test on mobile thoroughly.

AI hallucinated citations: Validate that cited sources actually contain the claimed information in TypeScript applications. LLMs make up citations constantly.

Badge sizing breaks with long hostnames: Very long domain names can break the layout in React components. Consider truncating hostnames.

Integration with other components

Works great in Response components for markdown content in React applications. Drop into Message for cited chat responses in Next.js projects. Combine with Actions for citation management like copy or verification. This free open source component integrates seamlessly with modern JavaScript frameworks.

React AI Inline Citation

Inline citation with sources

Installation

Usage

Why not just show links at the bottom?

Usage with Vercel AI SDK

Features

API Reference

InlineCitation

InlineCitationText

InlineCitationCard

InlineCitationCardTrigger

InlineCitationCardBody

InlineCitationCarousel

InlineCitationCarouselContent

InlineCitationCarouselItem

InlineCitationSource

InlineCitationQuote

Keyboard interactions

Citation gotchas that will bite you

Integration with other components

Questions developers actually ask

On this page

React AI Inline Citation

Reactai/inline-citation

How do I format citation numbers in text?

Can one citation have multiple sources?

What happens with invalid URLs?

How do citations work on mobile?

Can I customize the badge appearance?

On this page