Sources

Grounding for an answer: a collapsible list of the sources used, and InlineCitation — a superscript chip in running text that previews its source on hover or focus.

tsx

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/registry/seam/ui/sources"

const SOURCES = [
  {
    title: "Base UI — Collapsible",
    href: "https://base-ui.com/react/components/collapsible",
  },
  {
    title: "motion.dev — Springs",
    href: "https://motion.dev/docs/react-transitions",
  },
  {
    title: "Tailwind CSS v4",
    href: "https://tailwindcss.com/blog/tailwindcss-v4",
  },
]

export default function SourcesDemo() {
  return (
    <div className="w-full max-w-md">
      <Sources>
        <SourcesTrigger count={SOURCES.length} />
        <SourcesContent>
          {SOURCES.map((s, i) => (
            <Source key={s.href} href={s.href} title={s.title} index={i + 1} />
          ))}
        </SourcesContent>
      </Sources>
    </div>
  )
}

bunx --bun @seamui/cli@latest add sources

Notes

The citation preview rises at overlay depth (springs.surface, inherited from Preview Card) and fades in instead of rising under reduced motion; the sources list eases its height open and snaps under reduced motion.
The trigger presses with depth.pressed, dogfooded via buttonVariants since Collapsible owns the trigger ref.
Citation chips and source rows are real links — focusable, and the preview opens on focus as well as hover.
The favicon dogfoods Avatar with a numeric fallback, so a missing favicon still shows the citation number rather than a blank.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.