> ## 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

> Public Anvil2 RN components for agentic React Native surfaces.

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 shadow-none hover:no-underline">
                  <div className="rounded-xl overflow-hidden">
                    <div className="w-full relative" style={{
    aspectRatio: "16/9"
  }}>
                      {item.image && <img src={item.image} alt={item.title} onLoad={() => <div>test</div>} className={`absolute inset-0 w-full h-full object-cover m-0 block border-0${item.darkImage ? " dark:hidden" : ""}`} />}
                      {item.darkImage && <img src={item.darkImage} alt={item.title} className="absolute inset-0 w-full h-full object-cover hidden dark:block m-0 border-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. Each page is implementation-only: code examples and props, with no live preview."
  items={[
{
title: "Action Log",
href: "/docs/react-native/components/action-log/code",
description:
  "Surface a chronological record of agent and system activity.",
image: null,
},
{
title: "Agent Message",
href: "/docs/react-native/components/agent-message/code",
description:
  "Render a left-aligned agent chat row with copy, feedback, and a timestamp.",
image: null,
},
{
title: "Agent Thinking",
href: "/docs/react-native/components/agent-thinking/code",
description:
  "Mark where the agent currently is with the Atlas logo and optional status copy.",
image: null,
},
{
title: "Atlas Logo",
href: "/docs/react-native/components/atlas-logo/code",
description: "Render the Atlas agent brand mark.",
image: null,
},
{
title: "Bottom Sheet",
href: "/docs/react-native/components/bottom-sheet/code",
description:
  "Present secondary content in a panel that rises from the bottom of the screen.",
image: null,
},
{
title: "Button",
href: "/docs/react-native/components/button/code",
description: "Trigger an action or event.",
image: null,
},
{
title: "Button Toggle",
href: "/docs/react-native/components/button-toggle/code",
description: "Provide a persistent on and off action.",
image: null,
},
{
title: "Card",
href: "/docs/react-native/components/card/code",
description: "Group related content on a static or button surface.",
image: null,
},
{
title: "Dialog",
href: "/docs/react-native/components/dialog/code",
description:
  "Present a labeled modal surface with configured content and actions.",
image: null,
},
{
title: "Prompt Bar",
href: "/docs/react-native/components/prompt-bar/code",
description:
  "Compose and send a chat prompt, with optional voice capture.",
image: null,
},
{
title: "Suggestion",
href: "/docs/react-native/components/suggestion/code",
description:
  "Offer selectable follow-up prompts beneath an agent response.",
image: null,
},
{
title: "Text",
href: "/docs/react-native/components/text/code",
description: "Render Carto typography through variant, size, and text.",
image: null,
},
{
title: "Tooltip Surface",
href: "/docs/react-native/components/tooltip-surface/code",
description:
  "Render a tooltip pill and caret without trigger or positioning.",
image: null,
},
{
title: "User Message",
href: "/docs/react-native/components/user-message/code",
description:
  "Render a right-aligned user chat bubble with a timestamped action toolbar.",
image: null,
},
]}
/>