Grids & Layouts
Fluid Layout
Fluid animated bento grid with smooth transitions and organic shapes.
bentofluidanimatedorganic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{id: string, title: string, color: string, span: string}> | [{id: '1', title: 'Photography', color: 'bg-rose-500', span: 'col-span-1 row-span-1'}, ...] | Array of grid items with id, title, color (Tailwind class), and span (grid span classes). |
backgroundColor | string | bg-slate-50 | Background color (Tailwind class or hex). |
expandedDescription | function | (title: string) => `A deeper dive into the world of ${title.toLowerCase()}...` | Function that returns expanded description text based on item title. |
expandedButtonText | string | Explore Collection | Text for the expanded view button. |