Filter Selector

A premium filter selection component where items gracefully float between available and selected states with fluid animations, ideal for intuitive list filtering.

Preview

Select filter

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/filter-selector.json

Usage

Import the component:

import { FilterSelector } from "@/components/filter-selector"

Use it in your code:

<FilterSelector />

Props

Property	Type	Default	Description
`items*`	`array`	`[]`	Array of filter items with id, label, and custom Tailwind color classes.
`activeFilters*`	`array`	`[]`	Array of currently selected filter IDs.
`onFilterChange*`	`function`	`-`	Callback function fired when active filters change.
`theme`	`string`	`"dark"`	Color theme: "light" \| "dark".