Components
Filter Flow
Filter Flow
Showcasing an engaging animated user experience for product discovery, featuring dynamic search bar interaction and filter selections with result changes.
Search Products...
Filter
Headphones
$43.99
4.6
4,276 Reviews
Television
$109.99
3.9
2,316 Reviews
Camera
$40.99
4.2
5,274 Reviews
$50
4.5
Electronics
Installation
1
Install the packages
npm i gsap @gsap/react react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
filter-flow.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| filterCardItems | FilterCardItem[] | [] | Array of product-like card objects to render in the filter flow. Each object must include the following fields: |
| filterCardItems[].id | string | "item1" | Unique identifier for the card (used as key). |
| filterCardItems[].icon | React.ReactNode | <FaHeadphonesSimple /> wrapped in styled container | The product icon displayed inside the card. |
| filterCardItems[].iconBg | string | "bg-[#FF3D71]" | Tailwind class or CSS background for the icon container. |
| filterCardItems[].title | string | "Headphones" | The product title displayed at the top of the card. |
| filterCardItems[].price | string | "$43.99" | Product price displayed under the title. |
| filterCardItems[].rating | number | 4.6 | Numeric product rating (e.g., out of 5). |
| filterCardItems[].reviews | number | 4276 | Number of reviews associated with the product. |