AI Sources
Inline citation markers and the source list they refer to.
- AI
- 1 file
- 1 npm package
- Accessibility notes
pnpm dlx @dowel-ui/cli add ai-sourcesnpm packages installed: radix-ui.
import { InlineCitation } from "@/components/ui/ai-sources";Default
Expanded
Without Links
Single Source
With Favicons
Citation Preview
<InlineCitation>
| Prop | Type | Default |
|---|---|---|
index (required)Position in the source list, starting at 1. | number | — |
title (required)What is being cited. Becomes the accessible name. | string | — |
descriptionExcerpt shown in the preview card. | string | — |
faviconThe source's mark in the preview header. Decorative; an <img> needs | ReactNode | — |
previewShow a preview card — host, title, description — on hover and on keyboard focus. Requires | boolean | false |
previewDelayOpen delay for the preview, in milliseconds. | number | 0 |
Plus every attribute of <a>.
<Sources>
Every prop of Radix UI’s Collapsible.Root, plus className.
<SourcesTrigger>
| Prop | Type | Default |
|---|---|---|
count (required) | number | — |
faviconsMarks shown as an overlapping stack before the label. Decorative: the count is already in the trigger's words. A | ReactNode[] | — |
stackLimitHow many marks before a "+n" chip. | number | 3 |
Every prop of Radix UI’s Collapsible.Trigger, plus className.
<SourcesContent>
Every prop of Radix UI’s Collapsible.Content, plus className.
<Source>
| Prop | Type | Default |
|---|---|---|
index (required) | number | — |
title (required) | string | — |
excerptThe quoted passage, if there is one. | string | — |
faviconThe source's mark, shown before the title. Decorative — an <img> needs | ReactNode | — |
originWhere it came from — a domain, a filename, a document title. | string | — |
Plus every attribute of <a>.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes