Sources
"Used N sources" with stacked tiles, expanding into the list.
Sources shows what an answer was based on: a compact "Used 5 sources" pill with stacked domain tiles that expands into a numbered list of links. Tiles are generated from the domain, so no third-party favicon requests leak your users' reading.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/sources.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/sources.
Builds on: collapsible, motion
Usage
import { Sources } from "@/components/ui/sources";
<Sources sources={[{ title, url }]} />Motion
Links stagger in when expanded.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Sources
| Prop | Type | Default | Description |
|---|---|---|---|
| sources | { title; url }[] | — | The sources. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai sources component · citation list react · perplexity style sources · rag sources ui · shadcn ai sources