Sources Summary

Stacked favicons and the source count next to the answer actions.

import { Card } from "@/components/ui/card";

import { PerplexitySourcesSummary } from "../components/perplexity-sources-summary";
import { PERPLEXITY_DEMO_SOURCES } from "../constants/perplexity-demo";

export default function PerplexitySourcesSummaryExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-row justify-center gap-0 rounded-2xl p-6">
      <PerplexitySourcesSummary sources={PERPLEXITY_DEMO_SOURCES} />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-sources-summary

A static label, like Perplexity’s: the favicons of the first three distinct domains overlap in front of the count, like 16 sources. It isn’t clickable. Nothing renders when sources is empty.

Prop	Default	Description
`sources`		The sources of the answer.

Used in

Perplexity

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.