A filter panel with chips, checkboxes and a price range sits beside a product grid. The range thumb slides along its track, the cards outside the range dim together, and everything returns when the thumb slides back.
The import and the props worth knowing about, in one place.
import { Isometric218 } from "@/components/beste/piece/isometric218";
// Give it the card's media area; the drawing scales to fit and centers itself.
// palette: "theme" | "light" | "dark" | "tone" | "glass" (see-through, for a photo or gradient behind it), accent={false} for one color.
<div className="flex aspect-square flex-col overflow-hidden rounded-3xl border border-border bg-card">
<Isometric218 tone="color" color="#2F6FED" palette="theme" className="min-h-0 flex-1" />
<p className="px-8 pb-8 text-center text-lg text-muted-foreground">
Filters that narrow the grid as you move.
</p>
</div>