---
title: Bento grids overview
description: A collection of beautiful and responsive grids for your next project.
author: harimanok_
---

import Gradient from "@/animata/bento-grid/gradient";
import Three from "@/animata/bento-grid/three";
import Four from "@/animata/bento-grid/four";
import Eight from "@/animata/bento-grid/eight";

<ComponentList className="flex flex-col">
  <ComponentListItem copyId="gradient" className="flex-1 w-full">
    <Gradient />
    ```tsx file=<rootDir>/animata/bento-grid/gradient.tsx copyId="gradient"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="three" className="flex-1 w-full">
    <Three className="w-full" />
    ```tsx file=<rootDir>/animata/bento-grid/three.tsx copyId="three"

    ````

  </ComponentListItem>

  <ComponentListItem copyId="eight" className="flex-1 w-full">
    <Eight className="w-full" />
    ```tsx file=<rootDir>/animata/bento-grid/eight.tsx copyId="eight"

    ````

  </ComponentListItem>
</ComponentList>
