CMS Media Filter

Drop-in filters for any CMS

CMS Filter Bar with Chips & Tabs CMS Filter Bar with Chips & Tabs is the simplest way to add interactive filtering to any CMS-bound grid in Framer. Connect categories to chips, add tabs above your grid, and filter content instantly — no plugins, smart components, or per-category code edits. What It Does A canvas-based filtering system for Framer CMS grids. Three lightweight overrides handle the logic while everything visual stays native Framer frames, components, and CMS collections. - Chip Filters — Click a chip to filter cards by category. - Tab Filters — Switch tabs to filter by content type. - Combined Filters — Stack chip + tab filters with AND logic. - Case-Insensitive — Supports Sports, sports, and SPORTS. - Plural Tolerant — Matches Video and Videos automatically. - Clean Reflow — Hidden cards collapse using display:none. Key Features CMS-Driven Chips Connect chips to a Categories collection. Add new filters through CMS without changing code. Combinable Filters Combine category and type filters for advanced content discovery. Smart Matching Handles casing differences and singular/plural variations automatically. Built-In States Includes default, hover, and active states with proper contrast. Fully Responsive Works across desktop, tablet, and mobile layouts. Self-Configuring Each filter reads its label text at runtime. Duplicate, rename, and it works. Zero Code Edits Manage filters through CMS instead of modifying source files. What's Included Three Framer overrides from a single Filtering.tsx file: - withFilterChip - withFilterTab - withFilteredCard All components share a single state store so filters update instantly. Setup (5 Minutes) 1. Add CMS fields for categories and optional content types. 2. Add Filtering.tsx under Assets → Code → New Code File. 3. Create your chip row and label each chip. 4. Apply overrides: - Chips → withFilterChip - Tabs → withFilterTab - Cards → withFilteredCard 5. Publish and start filtering.

Drop-in filters for any CMS