Dynamic CMS Search & Filter gives you a production-ready search and filtering system for any content grid — no state wiring, no filter logic, no layout shift debugging required.
Type in the search bar and it matches against your items' title, description, and tag simultaneously. Click any tag chip and it filters by category. Both work together with intersection logic — only items matching the current query AND the selected tags are shown.
Items never leave the DOM. They cross-fade with an opacity transition, so the grid never reflows or collapses as you filter. Zero layout shift on every interaction.
What's included:
Real-time text search (matches title, description, and tag)
Multi-tag filter with intersection logic
Items fade via opacity — zero layout shift
1–4 column grid with configurable gap
Fully editable content from the property panel (items + tags)
6 color controls: accent, background, card background, text, input bg, input border
No external libraries — pure React + CSS
Live result count
Perfect for portfolio grids, blog archives, case study listings, product directories, or any content section that needs browsable, filterable cards.
Dynamic CMS Search & Filter gives you a production-ready search and filtering system for any content grid — no state wiring, no filter logic, no layout shift debugging required.
Type in the search bar and it matches against your items' title, description, and tag simultaneously. Click any tag chip and it filters by category. Both work together with intersection logic — only items matching the current query AND the selected tags are shown.
Items never leave the DOM. They cross-fade with an opacity transition, so the grid never reflows or collapses as you filter. Zero layout shift on every interaction.
What's included:
Real-time text search (matches title, description, and tag)
Multi-tag filter with intersection logic
Items fade via opacity — zero layout shift
1–4 column grid with configurable gap
Fully editable content from the property panel (items + tags)
6 color controls: accent, background, card background, text, input bg, input border
No external libraries — pure React + CSS
Live result count
Perfect for portfolio grids, blog archives, case study listings, product directories, or any content section that needs browsable, filterable cards.
