WebberUI

Masonry Gallery Home

Uneven-height masonry image cards with filter pills.

ProHome layoutshome-layout5 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/masonry-gallery-home.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

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 →