Citations

Component 14

About

A compact source summary that expands into grounded references with useful context.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Citations to your project and fits it to your theme.

Code

How Citations is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Citations from '@/components/ui/citations'

export default function Demo() {
  return (
    <div data-demo-stage className="flex min-h-[360px] w-full items-center justify-center p-8">
      <div className="relative h-7 w-full max-w-sm *:absolute *:inset-x-0 *:top-0">
        <Citations
          items={[
            {
              id: 'figma',
              title: 'Figma',
              domain: 'figma.com',
              description: 'Collaborative interface design and prototyping.',
              url: 'https://www.figma.com/',
              icon: <img src="https://cdn.21st.dev/assets/mirror/5b/5bcdea3417293412845b8298fe357fce3b192e8ff112d9b3fef315bc5cd127f6.svg" alt="" />,
            },
            {
              id: 'linear',
              title: 'Linear',
              domain: 'linear.app',
              description: 'Project planning and issue tracking for product teams.',
              url: 'https://linear.app/',
              icon: <img src="https://cdn.21st.dev/assets/mirror/e6/e669549bf9917d616f3ae10ace5ba9af6e84966ec12cadd13459489cded34ccf.svg" alt="" />,
            },
            {
              id: 'notion',
              title: 'Notion',
              domain: 'notion.so',
              description: 'A shared workspace for documents and team knowledge.',
              url: 'https://www.notion.so/',
              icon: <img src="https://cdn.21st.dev/assets/mirror/0d/0d94471649fb9badd434394846079c279876fdd224cf49ed46b6c09fbd3a041f.svg" alt="" className="bg-white" />,
            },
          ]}
        />
      </div>
    </div>
  )
}