CMS Search Filter

Tag filter & live search, pure CSS

Note: items are managed in Framer's property panel — this component does not bind to a CMS collection. 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.

Tag filter & live search, pure CSS