Components Overview

CMS Filter has 7 components that work together like magic. Insert via plugin or copy from dashboard, connect to your CMS collection, and they sync automatically.

All components automatically connect when they reference the same CMS collection. No technical setup required - they just work together!

Core Components

CMSCollection

Required

The main hub component that connects your CMS List and applies all filters, search, and sorting. This is the only required component.

FiltersSearchSortEmpty State

CMSSearch

Text search input that filters items across multiple CMS fields with debounced input for optimal performance.

Multi-fieldDebouncedCustomizable

CMSFilters

Advanced filter builder with 6 filter types (text, number, dropdown, range, toggle, enum) and multiple operators.

6 TypesMultiple OperatorsLogic Control

CMSCount

Real-time result counter with customizable templates. Shows current count, total, and search term.

TemplatesReal-timeConditional

CMSClearAll

Reset button that clears all active filters and search in one click. Fully customizable styling.

One-click ResetCustom Icon

CMSSort

Sorting controls with dropdown or button styles. Multiple sort fields with ascending/descending order.

DropdownButtonsMulti-field

CMSFacets

Active filter chips that display currently applied filters with individual remove buttons. Shows search term as chip.

Visual FeedbackRemove IndividualOverflow

How Components Connect

All components automatically share data through a centralized store. The store is automatically created based on the collection name or a custom store key.

🔑 Store Key Property

storeKey: 'auto' - Automatically uses your CMS collection name (easiest)

storeKey: 'custom-name' - Use a custom name for multiple filter groups

Diagram showing components connected through shared store

All components with matching store keys automatically share state

Minimal Setup

The simplest setup requires just two components:

1. CMSCollection (Required) - Connect your CMS List to its slot
2. Any other component (Search, Filters, Sort, etc.) - Auto-connects via storeKey

That's it! They work together automatically.

Complete Setup

For a full-featured filterable collection, use all components:

📐 Typical Layout Structure

Top: CMSSearch (search bar)

Controls Bar: CMSCount, CMSSort, CMSClearAll

Active Filters: CMSFacets (filter chips)

Sidebar: CMSFilters

Main Area: CMSCollection → CMS List

Component Comparison

Component	Required	Purpose	Use When
CMSCollection	✓ Yes	Hub & renderer	Always (required)
CMSSearch	No	Text search	Need to search titles/descriptions
CMSFilters	No	Advanced filtering	Need filtering by fields (price, category, etc.)
CMSCount	No	Result count	Want to show number of results
CMSClearAll	No	Reset filters	Users need easy way to clear filters
CMSSort	No	Sort results	Need to sort by price, date, name, etc.
CMSFacets	No	Show active filters	Want visual feedback of applied filters

Common Patterns

🛍️ E-Commerce Store

✓ CMSCollection (products)
✓ CMSSearch (name, description)
✓ CMSFilters (category, price, rating)
✓ CMSSort (price, popularity)
✓ CMSCount + CMSFacets + CMSClearAll

📝 Blog/Portfolio

✓ CMSCollection (posts)
✓ CMSSearch (content)
✓ CMSFilters (category, tags)
✓ CMSSort (date, title)
✓ CMSCount

🏠 Real Estate

✓ CMSCollection (properties)
✓ CMSSearch (address, city)
✓ CMSFilters (bedrooms, price, type)
✓ CMSSort (price, size, date)
✓ CMSCount + CMSFacets + CMSClearAll

Next Steps

Explore detailed documentation for each component:

CMSCollection →CMSSearch →CMSFilters →CMSCount →