Skeleton

A loading state built on shadcn Skeleton.

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

export default function AIOverviewSkeletonExample() {
  return (
    <AIOverview className="p-6" collapsible={false}>
      <AIOverviewHeader title="Searching" />
      <AIOverviewSkeleton />
    </AIOverview>
  );
}

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

AIOverviewSkeleton renders one shadcn Skeleton per entry in lines, each an { id, width }. Pass your own lines to change the shape of the placeholder.

Used in

Google AI Overview

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