Header

The sparkle icon and AI Overview label.

import { AIOverview } from "../components/ai-overview";
import { AIOverviewHeader } from "../components/ai-overview-header";

export default function AIOverviewHeaderExample() {
  return (
    <AIOverview className="p-6" collapsible={false}>
      <AIOverviewHeader />
      <AIOverviewHeader title="An AI Overview is not available for this search" />
    </AIOverview>
  );
}

$ bunx --bun shadcn@latest add @notra/ai-overview-header

title defaults to AI Overview. Swap it for Google’s other states, like “An AI Overview is not available for this search”. icon replaces the sparkle and inherits its blue through currentColor. Children render on the right.

Used in

Google AI Overview

A full recreation of Google’s AI Overview with highlights, citation chips and a collapsible Show more.