Discovery

Filter Panel

A faceted filter panel: groups of checkboxes with optional result counts, an active-filter count badge, and a clear-all control. Fully controlled by a value keyed on group id.

filter

facets

checkbox

Preview

Filters1

SizeSmall12Medium8Large5

AvailabilityIn stock21

Installation

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add filter-panel

Usage

Import

import { FilterPanel } from "@/components/lumo/filter-panel"

Example

const [filters, setFilters] = useState({})

<FilterPanel
  groups={[
    { id: "size", label: "Size", options: [
      { value: "s", label: "Small", count: 12 },
      { value: "m", label: "Medium", count: 8 },
    ] },
  ]}
  value={filters}
  onValueChange={setFilters}
/>

Props

Prop	Type	Default	Required
groups	FilterGroup[]	-	Required
value	Record<string, string[]>	-	Required
onValueChange	(value) => void	-	Required
title	string	"Filters"

All props accept standard HTML attributes unless otherwise specified.

Dependencies

npm packages

lucide-react

Own every line

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.

View on GitHub Read the docs