Grid With Filters
A client-rendered gallery with category chips that filter image tiles via useState and a live count showing how many images are visible.
A client-rendered gallery with category chips that filter image tiles via useState and a live count showing how many images are visible.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Grid With Filters is a client-rendered gallery with four category chips (All, Portrait, Landscape, Abstract) that filter six Placeholder tiles via useState. Each chip shows a live count so the total never disappears when a filter is active, and a line below the grid reads Showing 4 of 6 images to confirm what is visible. Items carry a title and year: Morning light, Hudson Valley, 2025; Studio session, Anya, 2025; Form study No. 3, 2024.
Items and category arrays drive both the chips and the grid. aria-pressed on the chip buttons and the border-foreground selected state meet accessibility requirements without a library.
Reach for this block as the primary gallery on a photography or fine-art portfolio page where the practice spans more than one subject. The installer swaps titles, years, and category labels for their own shoot log and replaces Placeholder tiles with real images.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the photography category gallery. Other filterable layouts:
Tip: keep the category count to four or five; more chips than that and the filter becomes harder to use than no filter at all.