Sources

AI chats 20

About

Here is Sources component

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

Code

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

Usage.tsx

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from '@/components/ui/sources';


export default function DemoOne() {
  return ( 
    <Sources>
      <SourcesTrigger count={1} />
      <SourcesContent>
        <Source href="https://ai-sdk.dev" title="AI SDK" />
      </SourcesContent>
    </Sources>
  );
}