Infinite Masonry
A scrollable wall of tiles laid out from a design: from small screens up, each tile sits where the design puts it, scaled with the box; on phones they flow into two columns and keep their proportions.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | T[] | — | The tiles' data. |
| getItemKey | (item, index) => string | number | — | A stable key per tile. |
| getItemRect | (item, index) => { x, y, width, height } | — | Where the tile sits on the design canvas, in design pixels. |
| renderItem | (item, index) => ReactNode | — | Draws a tile. |
| designWidth | number | — | The width of the design canvas the rects are measured on. |
| maxHeight | number | — | The box scrolls once the wall is taller than this. |
| ariaLabel | string | — | The wall's accessible name. |
| className | string | — | Classes for the root element. |