WebberUI
繁體中文

Masonry Gallery Home

Uneven-height masonry image cards with filter pills.

ProHome layoutshome-layout5 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/masonry-gallery-home.en.json?t=<install token>"

The whole page lands in app/templates/masonry-gallery-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav Bar and Hero

    Gallery opener with the brand nav bar, a gradient headline, a search field, and collection counts.

    hero
  2. 2

    Masonry Work Wall

    An uneven-height masonry wall filterable by category and keyword, with favouriting and load-more.

    gallery
  3. 3

    Resident Creators

    Three resident creators featured each week, with piece counts, follower counts, and a follow button.

    team
  4. 4

    Join as a Creator

    A dark gradient-glow card inviting creators to open a free gallery, or to browse the work first.

    cta
  5. 5

    Footer

    Brand blurb, social links, four columns of site navigation, and the copyright and address line.

    footer

Masonry Gallery Home is a React masonry gallery homepage template: cards of uneven height in a masonry layout, with category filter pills and a search box above. It is built with Next.js App Router, Tailwind CSS and Motion; filtering, search and likes all run in the browser.

When to use it

  • Community gallery homepage for photography, illustration or 3D work
  • Discovery page for a creator platform or curation site
  • An inspiration board for a design team
  • Portfolios with many image cards browsed by category

What to change after installing

  1. Replace the `WORKS` array in page.tsx with your own pieces; each item's `aspect` sets the card's height ratio and `category` decides which filter it appears under.
  2. Cards use a `gradient` and an emoji instead of images; to show real artwork, change `GalleryCard` to render your images.
  3. Categories are defined in `CATEGORIES` and `CATEGORY_LABEL`; update both, along with the `CategoryId` type, when adding or removing one.
  4. The resident creators section reads the `CURATORS` array; swap in your own people.
  5. Search only matches title and artist name, and likes live in component state; connect your own API or CMS to persist them or search more fields.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →