Inline Citation
The Inline Citation component provides a way to display citations inline with text content, similar to academic papers or research documents. It consists of a citation pill that shows detailed source information on hover, making it perfect for AI-generated content that needs to reference sources.
Inline Citation Example
Modern web development has evolved significantly over the past few years. New frameworks like Svelte offer better performance and developer experience example.com +2 compared to traditional approaches.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build citations for AI-generated content using experimental_useObject from @ai-sdk/svelte.
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
api/citation/+server.ts
Features
- Hover interaction to reveal detailed citation information
- Carousel navigation for multiple citations with prev/next controls
- Live index tracking showing current slide position (e.g., "1/5")
- Support for source titles, URLs, and descriptions
- Optional quote blocks for relevant excerpts
- Composable architecture for flexible citation formats
- Accessible design with proper keyboard navigation
- Seamless integration with AI-generated content
- Clean visual design that doesn't disrupt reading flow
- Smart badge display showing source hostname and count
Props
InlineCitation
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the inline citation container |
children | Snippet | - | Citation content (typically InlineCitationText and InlineCitationCard) |
...restProps | HTMLAttributes<HTMLSpanElement> | - | All other span props are supported |
InlineCitationCard
| Prop | Type | Default | Description |
|---|---|---|---|
closeDelay | number | 0 | Delay in milliseconds before closing the hover card |
openDelay | number | 0 | Delay in milliseconds before opening the hover card |
open | boolean | - | Controls whether the card is open (bindable) |
children | Snippet | - | Card content (typically InlineCitationCardTrigger and InlineCitationCardBody) |
InlineCitationCardTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
sources | string[] | - | Array of source URLs to display in the badge |
variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'secondary' | Badge variant style |
class | string | - | Additional CSS classes to apply to the badge |
children | Snippet | - | Custom badge content (defaults to hostname with count) |
InlineCitationCardBody
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the card body |
children | Snippet | - | Card body content (typically InlineCitationCarousel) |
InlineCitationCarousel
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the carousel |
opts | object | - | Embla carousel options |
plugins | any[] | - | Embla carousel plugins |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Carousel orientation |
children | Snippet | - | Carousel content (typically header, content, and navigation) |
InlineCitationCarouselHeader
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the carousel header |
children | Snippet | - | Header content (typically index and navigation buttons) |
...restProps | HTMLAttributes<HTMLDivElement> | - | All other div props are supported |
InlineCitationCarouselContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the carousel content |
children | Snippet | - | Carousel items (InlineCitationCarouselItem components) |
InlineCitationCarouselItem
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the carousel item |
children | Snippet | - | Item content (typically InlineCitationSource) |
InlineCitationCarouselNext
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the next button |
...restProps | HTMLButtonAttributes | - | All other button props are supported |
InlineCitationCarouselPrev
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the previous button |
...restProps | HTMLButtonAttributes | - | All other button props are supported |