Filter Selector

Below is a filter selector component with smooth and premium fluid animations

FilterSelector

Select filter

Genius

Billionaire

Playboy

Philanthropist

Vengeance

Installation

$ pnpm dlx shadcn@latest add https://pulseui-henna.vercel.app/registry/FilterSelector.json

Props

Prop	Type	isCompulsory	Description
items	{id: string; label: string}[]	true	the list of all the objects, each object has the name and id of a filter item
onSelection	(values: number[]) => void	true	sets the array of all the applied filters, the array contains indices of the applied filters from the array items

Usage

Demo.tsx

export function Demo(){
    const filterItems = [
    {
      id: "Genius",
      label: "Genius",
    },
    {
      id: "Billionaire",
      label: "Billionaire",
    },
    {
      id: "Playboy",
      label: "Playboy",
    },
    {
      id: "Philanthropist",
      label: "Philanthropist",
    },
    {
      id: "Vengeance",
      label: "Vengeance",
    },
  ];
  const [selectedList, setSelectedList] = useState<number[]>([]);

  return (
    <FilterSelector
        items={filterItems}
        onSelection={setSelectedList}
    />
  );
}