Content

Paragraph, heading, list and link styles for AI Overview answers.

import { AIOverview } from "../components/ai-overview";
import {
  AIOverviewContent,
  AIOverviewHeading,
  AIOverviewLink,
  AIOverviewList,
  AIOverviewListItem,
  AIOverviewParagraph,
} from "../components/ai-overview-content";

export default function AIOverviewContentExample() {
  return (
    <AIOverview className="p-6" collapsible={false}>
      <AIOverviewContent>
        <AIOverviewParagraph>
          <AIOverviewLink href="https://nextjs.org">Next.js</AIOverviewLink> is
          a React framework made by Vercel.
        </AIOverviewParagraph>
        <AIOverviewHeading>Why teams pick it</AIOverviewHeading>
        <AIOverviewList>
          <AIOverviewListItem>
            <strong>Routing:</strong> File-based routes with layouts.
          </AIOverviewListItem>
          <AIOverviewListItem>
            <strong>Rendering:</strong> Static, dynamic and streamed pages.
          </AIOverviewListItem>
        </AIOverviewList>
      </AIOverviewContent>
    </AIOverview>
  );
}

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

AIOverviewContent caps the answer at Google’s 44.25rem column. AIOverviewParagraph, AIOverviewHeading, AIOverviewList, AIOverviewListItem and AIOverviewLink are styled p, h3, ul, li and a elements that accept all of their native props.

Used in

Google AI Overview

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