# Inline Citation

Inline Citation [#inline-citation]

The **InlineCitation** primitives embed numbered/superscript citation markers in prose that open a hovercard showing the cited local chunk (title, excerpt, quoted snippet), with a carousel paging multiple sources for one claim. Distinct from the list-style `SourceCitationList`, citations reference locally-stored chunks only — no remote unfurl. Data source: `useSemanticSearch`.

Preview [#preview]

```tsx
'use client';

/**
 * @file inline-citation-demo.tsx
 * @description Docs preview for `InlineCitation`. Hover/focus a superscript
 * marker to reveal the cited local chunk; the multi-source marker pages via a
 * carousel. No network unfurl.
 */
import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationCarousel,
  InlineCitationQuote,
  InlineCitationSource,
} from '@/components/inline-citation';

export default function InlineCitationDemo() {
  return (
    <p className="w-full max-w-xl text-sm leading-relaxed text-foreground">
      LocalMode runs models entirely in the browser
      <InlineCitation>
        <InlineCitationCard>
          <InlineCitationCardTrigger label={1} />
          <InlineCitationCardBody>
            <InlineCitationCarousel count={1}>
              <InlineCitationSource
                title="architecture.md"
                excerpt="Execution model overview"
              >
                <InlineCitationQuote>
                  All inference executes on-device via WebGPU or WASM.
                </InlineCitationQuote>
              </InlineCitationSource>
            </InlineCitationCarousel>
          </InlineCitationCardBody>
        </InlineCitationCard>
      </InlineCitation>
      , and your data never leaves the device
      <InlineCitation>
        <InlineCitationCard>
          <InlineCitationCardTrigger label={2} />
          <InlineCitationCardBody>
            <InlineCitationCarousel count={2}>
              <InlineCitationSource title="privacy.md" excerpt="No telemetry">
                <InlineCitationQuote>
                  There is no analytics and no API keys.
                </InlineCitationQuote>
              </InlineCitationSource>
              <InlineCitationSource title="faq.md" excerpt="Data residency">
                <InlineCitationQuote>
                  Embeddings and vectors stay in local IndexedDB.
                </InlineCitationQuote>
              </InlineCitationSource>
            </InlineCitationCarousel>
          </InlineCitationCardBody>
        </InlineCitationCard>
      </InlineCitation>
      .
    </p>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/conversation/inline-citation
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the cited-chunk shape you pass — works with any backend. Recommended producer: local chunk provenance from `useSemanticSearch` in `@localmode/react` (on-device, optional).

* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `inline-citation.tsx` — `InlineCitation`, `InlineCitationCard`, `InlineCitationCardTrigger`, `InlineCitationCardBody`, `InlineCitationCarousel`, `InlineCitationSource`, `InlineCitationQuote`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**InlineCitationCardTrigger**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | **Required.** The marker number/label (e.g. `1`). |

Examples [#examples]

A cited claim [#a-cited-claim]

```tsx
import {
  InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger,
  InlineCitationCarousel, InlineCitationQuote, InlineCitationSource,
} from '@/components/inline-citation';

LocalMode runs in your browser
<InlineCitation>
  <InlineCitationCard>
    <InlineCitationCardTrigger label={1} />
    <InlineCitationCardBody>
      <InlineCitationCarousel count={1}>
        <InlineCitationSource title="architecture.md" excerpt="Execution model">
          <InlineCitationQuote>All inference executes on-device.</InlineCitationQuote>
        </InlineCitationSource>
      </InlineCitationCarousel>
    </InlineCitationCardBody>
  </InlineCitationCard>
</InlineCitation>.
```

Customization [#customization]

The marker is a focusable `<sup>` so it works by hover and keyboard. Pass `count > 1` to `InlineCitationCarousel` with multiple `InlineCitationSource` children to page sources for one claim.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. `useSemanticSearch`) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.