AI Sources

AI chats 46

About

Collapsible source list for a grounded answer, with per-source snippets that expand in place rather than opening a dialog. Respects prefers-reduced-motion.

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

Code

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

Usage.tsx

"use client";

import Component from "@/components/ui/ai-sources";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg rounded-2xl border bg-card p-6 shadow-sm">
        <p className="text-foreground text-sm leading-relaxed">
          Only <strong>transform</strong> and <strong>opacity</strong> are
          composited, so everything else forces layout on every frame.
        </p>
        <div className="mt-5 border-t pt-5">
          <Component
            defaultOpen
            label="Sources"
            sources={[
              {
                id: "1",
                snippet:
                  "Springs stay interruptible: a new target mid-flight keeps the current velocity.",
                title: "Transitions — Motion",
                url: "https://motion.dev/docs/react-transitions",
              },
              {
                id: "2",
                snippet:
                  "Compositor-only properties skip layout and paint entirely.",
                title: "Animations guide — web.dev",
                url: "https://web.dev/animations-guide",
              },
              {
                id: "3",
                snippet:
                  "prefers-reduced-motion should soften motion, not remove all feedback.",
                title: "prefers-reduced-motion — MDN",
                url: "https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion",
              },
            ]}
          />
        </div>
      </div>
    </div>
  );
}