4+ Bento Grids, Masonry Galleries, and Portfolio Grids
Bento grids, Vercel-style feature grids, Pinterest masonry galleries, tilted card fans, and portrait parallax galleries for portfolio pages, AI product landing pages, and marketing sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Bento Grid Feature Section (Vercel-Style Landing)
Vercel-style bento grid feature section with variable card sizes, for SaaS marketing pages, AI product landing pages, and Linear-style feature sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Masonry Image Grid (Pinterest-Style Multi-Column Gallery)
Pinterest-style masonry image grid with variable image heights, for photography portfolios, design agency landing pages, and product image galleries. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Tilted Card Fan Gallery (Hover to Lift)
Tilted card fan gallery hero with hover-to-lift interaction, for portfolio hero sections, product gallery previews, and agency landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Chapter one
Chapter twoVertical Portrait Parallax Gallery (Editorial Image Stack)
Vertical portrait parallax gallery with staggered image scroll speeds, for fashion portfolios, model agency websites, and photographer landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
What can I build with bento grids and image galleries?
Build:
- + bento grids
- + Vercel bento grid
- + Pinterest masonry gallery
- + tilted card fan galleries
- + portrait parallax galleries
- + portfolio image grids
- + product photo galleries
- + AI copilot sidebars
All components are built with React 18 and Tailwind CSS and can be customized using Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
About bento grids and image galleries
Bento grids, Vercel-style feature grids, Pinterest masonry galleries, tilted card fans, and portfolio image grids. Every component in this category ships with a live preview, copy-paste React and Tailwind source code, and the prompt that regenerates it in Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch.
Every component includes
- + A live preview of the exact section, screen, or animation
- + The prompt written for each of the 6 AI coding tools
- + Copy-paste React and Tailwind source code
- + Commercial usage rights
- + Implementation notes
- + Supported frameworks
Used inside
- + Landing pages
- + AI product websites
- + SaaS dashboards
- + AI chat apps
- + Startup websites
- + Portfolios
- + Marketing pages
- + Waitlist pages
React 18 and Tailwind CSS v3 assumed. Additional dependencies (framer-motion, gradflow) are listed on each component page when required.
Related prompts for bento grids and image galleries
Frequently asked questions
Can I use this component copyright-free in my website or app?+
Yes. Every component, code file, and included asset on this page is free for commercial use with no attribution required. There is no license fee, no royalty, and no copyright restriction. Copy it, adapt it, ship it in client work, SaaS products, open-source projects, or internal tools — it is yours from the moment you copy the code.
How do I use this component in my project?+
Copy the source file from the "Copy code" button and save it into your components folder. Add any listed dependencies (React 18 or later and Tailwind CSS v3 or later are always required, plus framer-motion or gradflow if the component lists them). Import and render the component wherever you want it. Every prop is optional and defaulted.
Does this component work with TypeScript?+
Yes. Every component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it works without modification. If you need a plain JavaScript version, paste the file into Claude Code or Cursor and ask it to strip the types.
Can I customise this component for my brand?+
Yes. Every component uses Tailwind utility classes throughout and accepts content props (headline, subtitle, image URL, CTA, and so on). Change the brand color in one place and every CTA updates. Swap the font in next/font and every heading updates. For structural changes, paste the prompt into Claude Code, Cursor, Lovable, Replit, or Codex and describe your brand tokens, spacing, or motion preferences.
Will this component slow down my page?+
No meaningful impact. Components that animate use CSS transforms, which are GPU-composited and do not trigger layout. Components that scroll-drive use a lightweight IntersectionObserver or useScroll hook — no polling or continuous repaints. The Tailwind output is tree-shaken at build time so no unused styles ship. Total JavaScript added per component is under 2 KB gzipped in most cases.
Can I use this with shadcn/ui or other component libraries?+
Yes. These components are standalone: no shared context, no global CSS, no conflicting reset. They use Tailwind utility classes and standard React hooks, which are compatible with shadcn/ui, Radix UI, MUI, and any other component library. Import them alongside your existing components without conflicts.
Are the components free for commercial use?+
Yes. Everything on this page is free to copy, adapt, and ship in commercial projects. No attribution required. If you post a public showcase we always appreciate a link back.
Which AI coding tool works best for these components?+
All five prompts produce the same design. Claude Code and Codex are best when you want the component slotted into a project with existing conventions. Cursor is ideal for editing inside your IDE with the file open. Lovable and Replit spin up a fresh preview fastest, useful for a quick play.
Do these work with Next.js, Vite, and Remix?+
Yes. The source files are plain React 18 client components. They run on any framework that supports React 18 and Tailwind CSS v3. If a component needs the "use client" directive (all of them do here, since they use hooks), keep the directive at the top of the file when you paste.