# Inline Citation Example

> Example implementation of inline citation.

A shadcn/ui block from the [@ai-elements](https://ai-sdk.dev/elements) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ai-elements/example-inline-citation).

- Page, with a live preview: https://shadcn.exchange/r/ai-elements/example-inline-citation
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ai-elements/example-inline-citation-light-a5e8964d625f8fc3.png
- Registry item: https://ai-sdk.dev/elements/api/registry/example-inline-citation.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-inline-citation.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://elements.ai-sdk.dev/inline-citation.json`

## Files

### `registry/default/examples/inline-citation.tsx`

```tsx
"use client";

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

const citation = {
  sources: [
    {
      description:
        "A comprehensive study on the recent developments in natural language processing technologies and their applications.",
      title: "Advances in Natural Language Processing",
      url: "https://example.com/nlp-advances",
    },
    {
      description:
        "An overview of the most significant machine learning breakthroughs in the past year.",
      title: "Breakthroughs in Machine Learning",
      url: "https://mlnews.org/breakthroughs",
    },
    {
      description:
        "A report on how artificial intelligence is transforming healthcare and diagnostics.",
      title: "AI in Healthcare: Current Trends",
      url: "https://healthai.com/trends",
    },
    {
      description:
        "A discussion on the ethical considerations and challenges in the development of AI.",
      title: "Ethics of Artificial Intelligence",
      url: "https://aiethics.org/overview",
    },
    {
      description:
        "Insights into the technical challenges and solutions for scaling deep learning architectures.",
      title: "Scaling Deep Learning Models",
      url: "https://deeplearninghub.com/scaling-models",
    },
    {
      description:
        "A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.",
      title: "Natural Language Understanding Benchmarks",
      url: "https://nlubenchmarks.com/latest",
    },
  ],
  text: "The technology continues to evolve rapidly, with new breakthroughs being announced regularly",
};

const Example = () => (
  <p className="text-sm leading-relaxed">
    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>
);

export default Example;
```