Sources
The sources behind an answer: a stack of letter tiles and a count, expanding to a numbered list that matches the citations.
On this page
Collapsed with stacked tiles, expanded as a numbered list.
Installation
Usage
import { Sources, sourcesFromParts } from "@/components/ui/chatcn/sources"
<Sources sources={sourcesFromParts(message.parts)} />Tiles show the domain's first letter on gray, so a row of sources stays as calm as the text around it. Pass favicon to show a real one; a broken image falls back to the letter.
Props
| Prop | Type | Notes |
|---|---|---|
sources | Source[] | { url, title?, snippet?, domain?, favicon?, id? } |
label | ReactNode | Defaults to 12 sources |
maxTiles | number | Tiles in the stack. Default 4 |
open, defaultOpen, onOpenChange | Collapsed by default |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Expand or collapse the list |
Tab | Move through the sources. Each opens in a new tab |
Accessibility
- The list is ordered, so its numbers are real list positions. Tiles are decorative and hidden from screen readers.
Motion
- The list opens over 200 ms. Hover changes background color only.