---
title: "CMS Media Filter — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Rashid Iqbal · Galleries. Drop-in filters for any CMS"
canonical: "https://framer.elliotli.dev/component/cms-media-filter"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/CMS Media Filter

# CMS Media Filter

Drop-in filters for any CMS

[View on Framer](https://framer.com/marketplace/components/cms-media-filter/?via=elliot-li)

![CMS Media Filter preview image 1](https://framer.elliotli.dev/og/component/cms-media-filter/8580359b4f28ef25/1600x1200.jpg)

## Summary

Drop-in filters for any CMS

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1600

## Details

- **Author**: Rashid Iqbal
- **Price**: $6.00
- **Published**: 2026-05-30
- **Updated**: 2026-09-22
- **Added**: 2026-05-21
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery