Search

The collapsible research step with a web search, its queries and sources.

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

import { PerplexitySearch } from "../components/perplexity-search";
import {
  PERPLEXITY_DEMO_QUERIES,
  PERPLEXITY_DEMO_SOURCES,
} from "../constants/perplexity-demo";

export default function PerplexitySearchExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border w-full min-w-0 gap-0 rounded-2xl p-6">
      <PerplexitySearch
        defaultOpen
        duration="1s"
        previewCount={3}
        queries={PERPLEXITY_DEMO_QUERIES.slice(0, 1)}
        sources={PERPLEXITY_DEMO_SOURCES}
        stepDefaultOpen
      />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-search

The step is two nested shadcn Collapsibles, both collapsed by default. The outer one shows “Researched” and the duration. Inside, behind a thin rail, “Searching the web” opens the query and source rows. Both headers and +N more are CollapsibleTriggers rendering a shadcn Button. Rows are shadcn Items, and emptyDescription renders in a shadcn Empty. The first previewCount sources show as rows. The rest sit behind +N more, which expands them in place.

Prop	Default	Description
`open`, `defaultOpen`, `onOpenChange`	`false`	The outer step, controlled or uncontrolled.
`stepOpen`, `stepDefaultOpen`, `onStepOpenChange`	`false`	The inner “Searching the web” row.
`label`	`Researched`	The outer header text.
`duration`		Shown muted after `label`, like `1s`.
`runningLabel`	`Researching…`	Shimmers in the header while `sequential` runs.
`title`	`Searching the web`	The inner header text.
`queries`		Search queries, one row each.
`sources`		Sources as `{ title, domain, url?, verified? }`.
`previewCount`	`4`	Sources shown before `+N more`.
`extraCount`		A `+N more` count when you don’t pass the extra sources.
`sequential`	`false`	Opens the step and reveals the queries, then the sources, one by one. It collapses again when done.
`reducedMotion`	`false`	Skips the sequence.
`emptyDescription`		Shown when there are no sources.
`labels`		`{ more: (count) => string, showLess: string }` to translate the expander.

Each source shows its favicon, with a globe as fallback, and its host without www. and the top-level domain, like en.wikipedia. Rows with a url link out in a new tab. A shield marks verified sources unless verified is false.

Used in

Perplexity

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