Gift Finder by Budget

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce26.tsx instead.

Usage

The file also exports ecommerce26Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce26, ecommerce26Demo } from "@/components/blocks/ecommerce/ecommerce26";

export default function Page() {
  return <Ecommerce26 {...ecommerce26Demo} />;
}

Props

Types

type BudgetValue = "under-25" | "25-50" | "50-100" | "100-plus";

type BudgetOption = { value: BudgetValue; label: string };

type GiftItem = {
  id: string;
  name: string;
  price: string;
  priceRange: BudgetValue; // which budget tab this item shows under
  image?: { src: string; alt: string };
};

Behavior notes

• The budget tabs are real client state: clicking one filters the grid to items whose priceRange matches, it isn't a decorative tab strip.
• The wishlist heart on each card is genuine per-card local state (toggles a filled/outline heart and updates its aria-pressed value); it resets on reload since nothing is persisted.
• "Quick add" has no click handler, it's a static call-to-action placeholder rather than a working add-to-cart.
• If a budget tab has zero matching items, the grid collapses to a single "No gifts in this range yet" line instead of an empty grid.
• Switching tabs does not affect wishlist state; a hearted item stays hearted if you filter away and back to its budget range.