Layout Grid
A layout effect that animates the grid item on click, powered by framer motion layout
Installation
Run the following command
npx shadcn@latest add @aceternity/layout-gridProps
| Prop | Type | Description |
|---|---|---|
cards | Card[] | An array of Card objects. Each Card object should have the following properties: id (a unique identifier), content (the JSX.Element to be displayed), className (the CSS class name for the card), and thumbnail (the URL of the thumbnail image). |
The Card type is defined as follows:
| Property | Type | Description |
|---|---|---|
id | number | A unique identifier for the card. |
content | JSX.Element | React.ReactNode | string | The content to be displayed in the card. |
className | string | The CSS class name for the card. |
thumbnail | string | The URL of the thumbnail image for the card. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
