Data Display

Citation

Inline citation marker opening a paginated preview of source references.

import { Citation } from '@lostgradient/cinder/citation';
citation
01

Overview

Citation pairs an inline source marker with a paginated Popover for interactive source details.

Usage

svelte 
<script lang="ts">
  import Citation from '@lostgradient/cinder/citation';
</script>

<Citation sources={[{ label: 'Component metadata guide', url: '/docs/components' }]} />
Live preview
02

When to use

Use when
  • Attaching sources to an inline claim or generated answer.
Avoid when
  • Building a full bibliography page.
03

Examples

Citation

Attach a compact source marker to a claim and expose its sources.

04

Props

Props for citation
Name
Type
Default
Description
sources CitationSource[] []
label text 'Sources'
children snippet