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

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/inline-citation.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/inline-citation

Props

InlineCitation

Name	Type	Default
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLSpanElement>`

InlineCitationCard

Name	Type	Default
`closeDelay`	`number`	`0`
`openDelay`	`number`	`0`
`open`	`boolean`
`children`	`Snippet`

InlineCitationCardTrigger

Name	Type	Default
`sources`	`string[]`
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline'`	`'secondary'`
`class`	`string`
`children`	`Snippet`

InlineCitationCardBody

Name	Type	Default
`class`	`string`
`children`	`Snippet`

InlineCitationCarousel

Name	Type	Default
`class`	`string`
`opts`	`object`
`plugins`	`any[]`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
`children`	`Snippet`

InlineCitationCarouselHeader

Name	Type	Default
`class`	`string`
`children`	`Snippet`
`...restProps`	`HTMLAttributes<HTMLDivElement>`

InlineCitationCarouselContent

Name	Type	Default
`class`	`string`
`children`	`Snippet`

InlineCitationCarouselItem

Name	Type	Default
`class`	`string`
`children`	`Snippet`

InlineCitationCarouselNext

Name	Type	Default
`class`	`string`
`...restProps`	`HTMLButtonAttributes`

InlineCitationCarouselPrev

Name	Type	Default
`class`	`string`
`...restProps`	`HTMLButtonAttributes`