Thinking

The shimmering Thinking... status shown before a search.

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

import { PerplexityThinking } from "../components/perplexity-thinking";

export default function PerplexityThinkingExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border w-full min-w-0 gap-0 rounded-2xl p-6">
      <PerplexityThinking />
    </Card>
  );
}

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

The label shimmers with the Notra Shimmer, which the CLI installs with it. It fades in and is announced politely to screen readers. Set reducedMotion to show plain text. label defaults to Thinking....

Used in

Perplexity

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