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

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: "AI Mark",
href: "/docs/web/components/ai-mark/design",
image: "/images/docs/web/patterns/embedded-ai/primary-monochrome.png",
},
{
title: "Alert",
href: "/docs/web/components/alert/design",
image: "/images/docs/web/components/alert/overview-image.png",
darkImage: "/images/docs/web/components/alert/overview-image-dark.png",
},
{
title: "Announcement",
href: "/docs/web/components/announcement/design",
image: "/images/docs/web/components/announcement/overview-image.png",
darkImage: "/images/docs/web/components/announcement/overview-image-dark.png",
},
{
title: "Avatar",
href: "/docs/web/components/avatar/design",
image: "/images/docs/web/components/avatar/overview-image.png",
darkImage: "/images/docs/web/components/avatar/overview-image-dark.png",
},
{
title: "Badge",
href: "/docs/web/components/badge/design",
image: "/images/docs/web/components/badge/overview-image.png",
darkImage: "/images/docs/web/components/badge/overview-image-dark.png",
},
{
title: "Breadcrumbs",
href: "/docs/web/components/breadcrumbs/design",
image: "/images/docs/web/components/breadcrumbs/overview-image.png",
darkImage: "/images/docs/web/components/breadcrumbs/overview-image-dark.png",
},
{
title: "Button",
href: "/docs/web/components/button/design",
image: "/images/docs/web/components/button/overview-image.png",
darkImage: "/images/docs/web/components/button/overview-image-dark.png",
},
{
title: "Button Toggle",
href: "/docs/web/components/button-toggle/design",
image: "/images/docs/web/components/button-toggle/overview-image.png",
darkImage: "/images/docs/web/components/button-toggle/overview-image-dark.png",
},
{
title: "Calendar",
href: "/docs/web/components/calendar/code",
image: "/images/docs/web/components/calendar/overview-image.png",
darkImage: "/images/docs/web/components/calendar/overview-image-dark.png",
},
{
title: "Card",
href: "/docs/web/components/card/design",
image: "/images/docs/web/components/card/overview-image.png",
darkImage: "/images/docs/web/components/card/overview-image-dark.png",
},
{
title: "Checkbox",
href: "/docs/web/components/checkbox/design",
image: "/images/docs/web/components/checkbox/overview-image.png",
darkImage: "/images/docs/web/components/checkbox/overview-image-dark.png",
},
{
title: "Chip",
href: "/docs/web/components/chip/design",
image: "/images/docs/web/components/chip/overview-image.png",
darkImage: "/images/docs/web/components/chip/overview-image-dark.png",
},
{
title: "Combobox",
href: "/docs/web/components/combobox/design",
image: "/images/docs/web/components/combobox/overview-image.png",
darkImage: "/images/docs/web/components/combobox/overview-image-dark.png",
},
{
title: "Data Table",
href: "/docs/web/components/data-table/design",
image: "/images/docs/web/components/data-table/overview-image.png",
darkImage: "/images/docs/web/components/data-table/overview-image-dark.png",
},
{
title: "Date Field Single",
href: "/docs/web/components/date-field-single/code",
image: "/images/docs/web/components/date-field-single/overview-image.png",
darkImage: "/images/docs/web/components/date-field-single/overview-image-dark.png",
},
{
title: "Date Field Range",
href: "/docs/web/components/date-field-range/code",
image: "/images/docs/web/components/date-field-range/overview-image.png",
darkImage: "/images/docs/web/components/date-field-range/overview-image-dark.png",
},
{
title: "Date Field Yearless",
href: "/docs/web/components/date-field-yearless/code",
image: "/images/docs/web/components/date-field-yearless/overview-image.png",
darkImage: "/images/docs/web/components/date-field-yearless/overview-image-dark.png",
},
{
title: "Days Of The Week",
href: "/docs/web/components/days-of-the-week/design",
image: "/images/docs/web/components/days-of-the-week/overview-image.png",
darkImage: "/images/docs/web/components/days-of-the-week/overview-image-dark.png",
},
{
title: "Details",
href: "/docs/web/components/details/design",
image: "/images/docs/web/components/details/overview-image.png",
darkImage: "/images/docs/web/components/details/overview-image-dark.png",
},
{
title: "Dialog",
href: "/docs/web/components/dialog/design",
image: "/images/docs/web/components/dialog/overview-image.png",
darkImage: "/images/docs/web/components/dialog/overview-image-dark.png",
},
{
title: "Divider",
href: "/docs/web/components/divider/design",
image: "/images/docs/web/components/divider/overview-image.png",
darkImage: "/images/docs/web/components/divider/overview-image-dark.png",
},
{
title: "Dnd",
href: "/docs/web/components/dnd/code",
image: "/images/docs/web/components/dnd/overview-image.png",
darkImage: "/images/docs/web/components/dnd/overview-image-dark.png",
},
{
title: "Dnd Sort",
href: "/docs/web/components/dnd-sort/code",
image: "/images/docs/web/components/dnd-sort/overview-image.png",
darkImage: "/images/docs/web/components/dnd-sort/overview-image-dark.png",
},
{
title: "Drawer",
href: "/docs/web/components/drawer/design",
image: "/images/docs/web/components/drawer/overview-image.png",
darkImage: "/images/docs/web/components/drawer/overview-image-dark.png",
},
{
title: "DrillDown",
href: "/docs/web/components/drilldown/design",
image: "/images/docs/web/components/drilldown/overview-image.png",
darkImage: "/images/docs/web/components/drilldown/overview-image-dark.png",
},
{
title: "Edit Card",
href: "/docs/web/components/edit-card/design",
image: "/images/docs/web/components/edit-card/overview-image.png",
darkImage: "/images/docs/web/components/edit-card/overview-image-dark.png",
},
{
title: "Field Message",
href: "/docs/web/components/field-message/design",
image: "/images/docs/web/components/field-message/overview-image.png",
darkImage: "/images/docs/web/components/field-message/overview-image-dark.png",
},
{
title: "Flex",
href: "/docs/web/components/flex/code",
image: "/images/docs/web/components/flex/overview-image.png",
darkImage: "/images/docs/web/components/flex/overview-image-dark.png",
},
{
title: "Grid",
href: "/docs/web/components/grid/code",
image: "/images/docs/web/components/grid/overview-image.png",
darkImage: "/images/docs/web/components/grid/overview-image-dark.png",
},
{
title: "Icon",
href: "/docs/web/components/icon/design",
image: "/images/docs/web/components/icon/overview-image.png",
darkImage: "/images/docs/web/components/icon/overview-image-dark.png",
},
{
title: "Interactive Card",
href: "/docs/web/components/interactive-card/design",
image: "/images/docs/web/components/interactive-card/overview-image.png",
darkImage: "/images/docs/web/components/interactive-card/overview-image-dark.png",
},
{
title: "Layout",
href: "/docs/web/components/layout/design",
image: "/images/docs/web/components/layout/overview-image.png",
darkImage: "/images/docs/web/components/layout/overview-image-dark.png",
},
{
title: "Link",
href: "/docs/web/components/link/design",
image: "/images/docs/web/components/link/overview-image.png",
darkImage: "/images/docs/web/components/link/overview-image-dark.png",
},
{
title: "List View",
href: "/docs/web/components/list-view/design",
image: "/images/docs/web/components/list-view/overview-image.png",
darkImage: "/images/docs/web/components/list-view/overview-image-dark.png",
},
{
title: "Listbox",
href: "/docs/web/components/listbox/design",
image: "/images/docs/web/components/listbox/overview-image.png",
darkImage: "/images/docs/web/components/listbox/overview-image-dark.png",
},
{
title: "Menu",
href: "/docs/web/components/menu/design",
image: "/images/docs/web/components/menu/overview-image.png",
darkImage: "/images/docs/web/components/menu/overview-image-dark.png",
},
{
title: "Multi Select Field",
href: "/docs/web/components/multi-select-field/design",
image: "/images/docs/web/components/select-field/multi/overview-image.png",
darkImage: "/images/docs/web/components/select-field/multi/overview-image-dark.png",
},
{
title: "Number Field",
href: "/docs/web/components/number-field/design",
image: "/images/docs/web/components/number-field/overview-image.png",
darkImage: "/images/docs/web/components/number-field/overview-image-dark.png",
},
{
title: "Overflow",
href: "/docs/web/components/overflow/code",
image: "/images/docs/web/components/overflow/overview-image.png",
darkImage: "/images/docs/web/components/overflow/overview-image-dark.png",
},
{
title: "Page",
href: "/docs/web/components/page/design",
image: "/images/docs/web/components/page/overview-image.png",
darkImage: "/images/docs/web/components/page/overview-image-dark.png",
},
{
title: "Pagination",
href: "/docs/web/components/pagination/code",
image: "/images/docs/web/components/pagination/overview-image.png",
darkImage: "/images/docs/web/components/pagination/overview-image-dark.png",
},
{
title: "Popover",
href: "/docs/web/components/popover/design",
image: "/images/docs/web/components/popover/overview-image.png",
darkImage: "/images/docs/web/components/popover/overview-image-dark.png",
},
{
title: "Progress Bar",
href: "/docs/web/components/progress-bar/design",
image: "/images/docs/web/components/progress-bar/overview-image.png",
darkImage: "/images/docs/web/components/progress-bar/overview-image-dark.png",
},
{
title: "Radio",
href: "/docs/web/components/radio/design",
image: "/images/docs/web/components/radio/overview-image.png",
darkImage: "/images/docs/web/components/radio/overview-image-dark.png",
},
{
title: "Search Field",
href: "/docs/web/components/search-field/design",
image: "/images/docs/web/components/search-field/overview-image.png",
darkImage: "/images/docs/web/components/search-field/overview-image-dark.png",
},
{
title: "Segmented Control",
href: "/docs/web/components/segmented-control/design",
image: "/images/docs/web/components/segmented-control/overview-image.png",
darkImage: "/images/docs/web/components/segmented-control/overview-image-dark.png",
},
{
title: "Select Card",
href: "/docs/web/components/select-card/design",
image: "/images/docs/web/components/select-card/overview-image.png",
darkImage: "/images/docs/web/components/select-card/overview-image-dark.png",
},
{
title: "Select Field",
href: "/docs/web/components/select-field/design",
image: "/images/docs/web/components/select-field/single/overview-image.png",
darkImage: "/images/docs/web/components/select-field/single/overview-image-dark.png",
},
{
title: "Select Trigger",
href: "/docs/web/components/select-trigger/code",
image: "/images/docs/web/components/select-trigger/overview-image.png",
darkImage: "/images/docs/web/components/select-trigger/overview-image-dark.png",
},
{
title: "Side Nav",
href: "/docs/web/components/side-nav/design",
image: "/images/docs/web/components/side-nav/overview-image.png",
darkImage: "/images/docs/web/components/side-nav/overview-image-dark.png",
},
{
title: "Skeleton",
href: "/docs/web/components/skeleton/design",
image: "/images/docs/web/components/skeleton/overview-image.png",
darkImage: "/images/docs/web/components/skeleton/overview-image-dark.png",
},
{
title: "Spinner",
href: "/docs/web/components/spinner/design",
image: "/images/docs/web/components/spinner/overview-image.png",
darkImage: "/images/docs/web/components/spinner/overview-image-dark.png",
},
{
title: "Stepper",
href: "/docs/web/components/stepper/design",
image: "/images/docs/web/components/stepper/overview-image.png",
darkImage: "/images/docs/web/components/stepper/overview-image-dark.png",
},
{
title: "Switch",
href: "/docs/web/components/switch/design",
image: "/images/docs/web/components/switch/overview-image.png",
darkImage: "/images/docs/web/components/switch/overview-image-dark.png",
},
{
title: "Tab",
href: "/docs/web/components/tab/design",
image: "/images/docs/web/components/tab/overview-image.png",
darkImage: "/images/docs/web/components/tab/overview-image-dark.png",
},
{
title: "Text",
href: "/docs/web/components/text/design",
image: "/images/docs/web/components/text/overview-image.png",
darkImage: "/images/docs/web/components/text/overview-image-dark.png",
},
{
title: "Text Field",
href: "/docs/web/components/text-field/design",
image: "/images/docs/web/components/text-field/overview-image.png",
darkImage: "/images/docs/web/components/text-field/overview-image-dark.png",
},
{
title: "Textarea",
href: "/docs/web/components/textarea/design",
image: "/images/docs/web/components/textarea/overview-image.png",
darkImage: "/images/docs/web/components/textarea/overview-image-dark.png",
},
{
title: "Time Field",
href: "/docs/web/components/time-field/design",
image: "/images/docs/web/components/time-field/overview-image.png",
darkImage: "/images/docs/web/components/time-field/overview-image-dark.png",
},
{
title: "Toast",
href: "/docs/web/components/toast/design",
image: "/images/docs/web/components/toast/overview-image.png",
darkImage: "/images/docs/web/components/toast/overview-image-dark.png",
},
{
title: "Toolbar",
href: "/docs/web/components/toolbar/design",
image: "/images/docs/web/components/toolbar/overview-image.png",
darkImage: "/images/docs/web/components/toolbar/overview-image-dark.png",
},
{
title: "Toolbar Filters",
href: "/docs/web/components/toolbar-filters/code",
image: "/images/docs/web/components/toolbar-filter/overview-image.png",
darkImage: "/images/docs/web/components/toolbar-filter/overview-image-dark.png",
},
{
title: "Tooltip",
href: "/docs/web/components/tooltip/design",
image: "/images/docs/web/components/tooltip/overview-image.png",
darkImage: "/images/docs/web/components/tooltip/overview-image-dark.png",
},
]}
/>
