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

# Blocks

> Runnable reference implementations composed from Anvil2 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 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>;
};

Blocks are compositions of Anvil2 components and patterns that can be used to implement common use cases in your project. They are intentionally not components because they may need to be customized to fit specific requirements. Providing them as composition examples enables more flexibility in the implementation.

There are a few different ways to use Blocks:

* **Codegen agents:** ask Claude or your codegen agent of choice to use the Anvil2 MCP to implement a Block or pattern. If it exists, it will find the code snippet and morph it to work with your use case.
* **Open in StackBlitz:** go to the Block page you need and click "StackBlitz demo". This will open the Block in a StackBlitz sandbox that you can tweak then copy into your project.
* **Copy directly:** go to the Block page you need and click "Show code", then copy it directly and paste it in your project.

<Card title="Blocks Figma" icon="figma" href="https://www.figma.com/design/9OB8FwOZZc079PBR6XY8vP/Anvil-Blocks?node-id=1-106&t=oftOhMuXbHBzBQO3-0">
  Blocks start as design contributions in Figma. Start here if you have an idea for a new Block.
</Card>

<OverviewGrid
  imageBackground="#ffffff"
  darkImageBackground="#1a1a1a"
  items={[
{
title: "Column Editor",
href: "/docs/blocks/column-editor",
image: "/images/docs/blocks/patterns/column-editor/overview-image.png",
darkImage: "/images/docs/blocks/patterns/column-editor/overview-image-dark.png",
},
{
title: "Peek",
href: "/docs/blocks/peek",
image: "/images/docs/blocks/patterns/peek/overview-image.png",
darkImage: "/images/docs/blocks/patterns/peek/overview-image-dark.png",
},
]}
/>