> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Components are reusable building blocks of the UI, crafted from Foundations.

export const OverviewGrid = ({description, items}) => {
  const hasImages = items?.some(item => item.image || item.darkImage);
  return <div className="my-10">
      <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
        {description}
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
        {items && items.length > 0 ? items.map(item => hasImages ? <a key={item.title} href={item.href} className="group block border-0 hover:no-underline">
                  <div className="flex items-center justify-center rounded-xl bg-gray-100 border border-gray-200 dark:border-neutral-800 group-hover:border-blue-500 dark:group-hover:border-blue-600 transition-colors overflow-hidden">
                    <div className="w-full bg-gray-100 dark:bg-gray-800 relative" style={{
    aspectRatio: "16/9"
  }}>
                      {item.image && <img src={item.image} alt={item.title} onLoad={() => <div>test</div>} className={`w-full object-contain m-0 block${item.darkImage ? " dark:hidden" : ""}`} />}
                      {item.darkImage && <img src={item.darkImage} alt={item.title} className="w-full object-contain hidden dark:block m-0" />}
                    </div>
                  </div>
                  <h4 className="mt-2 text-center text-gray-800 dark:text-gray-200 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
                    {item.title}
                  </h4>
                </a> : <Card key={item.title} title={item.title} href={item.href}>
                  {item.description}
                </Card>) : null}
      </div>
    </div>;
};

<OverviewGrid
  description="Components are reusable building blocks of the UI, crafted from Foundations."
  items={[
{
title: "Action Log",
href: "/docs/kits/ai-kit/components/action-log/design",
description: "Surface a chronological record of agent and system activity.",
image: null,
},
{
title: "Agent Prompt",
href: "/docs/kits/ai-kit/components/agent-prompt/design",
description: "Ask users a clarifying question before the agent continues.",
image: null,
},
{
title: "App Header",
href: "/docs/kits/ai-kit/components/app-header/design",
description: "Provide top-level navigation and identity for Carto experiences.",
image: null,
},
{
title: "App Shell",
href: "/docs/kits/ai-kit/components/app-shell/design",
description: "Frame the overall layout for Carto product experiences.",
image: null,
},
{
title: "Artifact Card",
href: "/docs/kits/ai-kit/components/artifact-card/design",
description: "Present agent-generated content as an actionable row in a chat transcript.",
image: null,
},
{
title: "Bottom Sheet",
href: "/docs/kits/ai-kit/components/bottom-sheet/design",
description: "Present secondary content in a panel that rises from the bottom of the screen.",
image: null,
},
{
title: "Button",
href: "/docs/kits/ai-kit/components/button/design",
description: "Trigger an action or event.",
image: null,
},
{
title: "Card",
href: "/docs/kits/ai-kit/components/card/design",
description: "Group related content in a contained surface.",
image: null,
},
{
title: "Chat History",
href: "/docs/kits/ai-kit/components/chat-history/design",
description: "List prior conversations for navigation and resumption.",
image: null,
},
{
title: "Chat Layout",
href: "/docs/kits/ai-kit/components/chat-layout/design",
description: "Structure the primary conversation experience.",
image: null,
},
{
title: "Checkbox",
href: "/docs/kits/ai-kit/components/checkbox/design",
description: "Let users select one or more options from a set.",
image: null,
},
{
title: "Citation",
href: "/docs/kits/ai-kit/components/citation/design",
description: "Attribute content to a source within agent responses.",
image: null,
},
{
title: "Dialog",
href: "/docs/kits/ai-kit/components/dialog/design",
description: "Present focused tasks or decisions in a modal overlay.",
image: null,
},
{
title: "Diff Value",
href: "/docs/kits/ai-kit/components/diff-value/design",
description: "Highlight changes between previous and updated values.",
image: null,
},
{
title: "Guidance Card",
href: "/docs/kits/ai-kit/components/guidance-card/design",
description: "Surface recommendations or instructional content.",
image: null,
},
{
title: "Link",
href: "/docs/kits/ai-kit/components/link/design",
description: "Navigate users to another page or location.",
image: null,
},
{
title: "Markdown",
href: "/docs/kits/ai-kit/components/markdown/design",
description: "Render formatted text content from agent responses.",
image: null,
},
{
title: "Menu",
href: "/docs/kits/ai-kit/components/menu/design",
description: "Present a list of actions or options from a trigger.",
image: null,
},
{
title: "Prompt Bar",
href: "/docs/kits/ai-kit/components/prompt-bar/design",
description: "Let users compose and submit prompts to an agent.",
image: null,
},
{
title: "Suggestion",
href: "/docs/kits/ai-kit/components/suggestion/design",
description: "Offer quick follow-up actions or prompts.",
image: null,
},
{
title: "Tabbed Layout",
href: "/docs/kits/ai-kit/components/tabbed-layout/design",
description: "Organize related views into selectable tabs.",
image: null,
},
{
title: "Text",
href: "/docs/kits/ai-kit/components/text/design",
description: "Display typographic content with Carto styles.",
image: null,
},
{
title: "Truncated Text",
href: "/docs/kits/ai-kit/components/truncated-text/design",
description: "Shorten long strings while keeping content accessible.",
image: null,
},
{
title: "User Message",
href: "/docs/kits/ai-kit/components/user-message/design",
description: "Display content sent by the user in a conversation.",
image: null,
},
{
title: "Window",
href: "/docs/kits/ai-kit/components/window/design",
description: "Present contained, moveable, or framed content regions.",
image: null,
},
]}
/>