Client-side search and filtering with URL state synchronization.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

items(required)

• Type: SearchableItem[] | string
• Items to search and filter (array or JSON string)

searchFields(required)

• Type: string[] | string
• Fields to search in

filters

• Type: FilterConfig[] | string
• Filter configurations (array or JSON string)

syncToUrl

• Type: boolean - Default: true
• Sync filters to URL query params

renderItem

• Type: (item: SearchableItem) => React.ReactNode
• Render function for each item

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

className

• Type: string
• Additional CSS class

placeholder

• Type: string
• Search placeholder

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-search-filters
• .cc-search-filters__clear
• .cc-search-filters__controls
• .cc-search-filters__count
• .cc-search-filters__default-item
• .cc-search-filters__empty
• .cc-search-filters__filter
• .cc-search-filters__filter-label
• .cc-search-filters__filters
• .cc-search-filters__icon
• .cc-search-filters__input
• .cc-search-filters__item
• .cc-search-filters__items
• .cc-search-filters__results
• .cc-search-filters__search
• .cc-search-filters__select