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.
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.
Connect chips to a Categories collection. Add new filters through CMS without changing code.
Combine category and type filters for advanced content discovery.
Handles casing differences and singular/plural variations automatically.
Includes default, hover, and active states with proper contrast.
Works across desktop, tablet, and mobile layouts.
Each filter reads its label text at runtime. Duplicate, rename, and it works.
Manage filters through CMS instead of modifying source files.
Three Framer overrides from a single Filtering.tsx file:
- withFilterChip
- withFilterTab
- withFilteredCard
All components share a single state store so filters update instantly.
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.
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.
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.
Connect chips to a Categories collection. Add new filters through CMS without changing code.
Combine category and type filters for advanced content discovery.
Handles casing differences and singular/plural variations automatically.
Includes default, hover, and active states with proper contrast.
Works across desktop, tablet, and mobile layouts.
Each filter reads its label text at runtime. Duplicate, rename, and it works.
Manage filters through CMS instead of modifying source files.
Three Framer overrides from a single Filtering.tsx file:
- withFilterChip
- withFilterTab
- withFilteredCard
All components share a single state store so filters update instantly.
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.
