filter-sidebar

Filter Sidebar

A product list with its filters in a collapsible sidebar beside it, plus sorting and search.

States: Default, Hover, Focus

Parts

Part	File	Does
FilterSidebar	FilterSidebar.vue	Shows a product list with filters in a collapsible sidebar, plus sorting and search.

Styling

Part	Recipe
FilterSidebar	filter-sidebar
FilterSidebar	title
FilterSidebar	hint
FilterSidebar	clear-link

Install

Writes 3 files into components/templates/filter-sidebar/. For agents, npx @frontic/ui docs filter-sidebar prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; button; empty; filter; filter-model; input-group; product-card-basic; scroll-area; select; separator; sheet; tag-group; use-filter-state
npm packages: @lucide/vue

Built from

Badge Button Empty Filter Input Group Product Card Basic Scroll Area Select Separator Sheet Tag Group

API reference

FilterSidebar FilterSidebar.vue

Shows a product list with filters in a collapsible sidebar, plus sorting and search. Renders a <div>.

Prop	Type	Default
filters	UiFilter[]	[]

activeFilters	Record<string, unknown>	{}

sortOptions	UiSort[]	[]

activeSorting	string	'default'

searchTerm	string	''

totalResults	number	0

category	string	''

products	Product[]	[]

currency	string	'EUR'

locale	string	—

resultsLabel	((count: number) => string)	`${count} ${count === 1 ? 'product' : 'products'}`

showFiltersLabel	string	'Show Filters'

hideFiltersLabel	string	'Hide Filters'

filtersLabel	string	'Filters'

sheetTitle	string	'Filters & Sort'

sortPlaceholder	string	'Sort by'

searchPlaceholder	string	'Search products...'

resetLabel	string	'Reset'

showResultsLabel	((count: number) => string)	`Show Results (${count})`

removeLabel	((label: string) => string)	`Remove ${label}`

activeFiltersLabel	string	'Active filters'

clearAllLabel	string	'Clear all'

emptyTitle	string	'No products match these filters'

emptyText	string	'Remove a filter or clear them all to see more.'

loadMoreLabel	string	'Load more'

swatchColors	Record<string, string>	{ ...DEFAULT_SWATCH_COLORS }

class	ClassValue	—

Event	Payload
reset	—

addFilter	field: string, value: UiFilterValue

removeFilter	field: string, value?: string \| undefined

sortResult	sortBy?: string \| undefined

loadMore	—

update:searchTerm	term: string

Recipe filter-sidebar	Sets
base: filter-sidebar	1 property

Recipe title	Sets
base: title	1 property

Recipe hint	Sets
base: hint	2 properties

Recipe clear-link	Sets
base: clear-link	5 properties

focus-ringshared state	3 properties

Example