Bundle Builder

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<BundleBuilder />

Installation

Usage

import {
  BundleBuilder,
  type BundleProduct,
} from "@/components/ui/bundle-builder";

const products: BundleProduct[] = [
  { id: "a", name: "Croissant", price: 65, thumbnail: "🥐" },
  { id: "b", name: "Latte", price: 120, thumbnail: "☕" },
  { id: "c", name: "Salad", price: 150, thumbnail: "🥗" },
  { id: "d", name: "Cake", price: 95, thumbnail: "🍰" },
];

<BundleBuilder
  products={products}
  columns={4}
  slots={3}
  discount={0.2}
  currency="NT$"
  onAddToBundle={(items, total) => console.log(items, total)}
/>;

Click a product thumbnail at the top and it flies into a slot below with a FLIP animation. Once the slots reach the configured count, the discount ring fills, the discount label pops out, and the total rolls to the discounted price. Click the product or the slot again to remove it.

Controlled mode

Passing selectedIds puts it in controlled mode, with outside state driving the selection:

const [ids, setIds] = React.useState<string[]>([]);

<BundleBuilder
  products={products}
  selectedIds={ids}
  onSelectionChange={setIds}
  onUnlock={() => console.log("discount unlocked")}
/>;

Props

BundleProduct

How it works

• FLIP fly-in: implemented with Motion's layoutId shared layout animation. Once selected, the same thumbnail moves from the product grid into a slot and Motion measures the before and after positions automatically to perform the FLIP transition; a check mark placeholder is left in the grid cell to keep the layout stable.
• Rolling total: useMotionValue + animate roll smoothly to the new price, updating frame by frame without triggering a React re-render; once the bundle is full, the discount is applied and the struck-through original price and the amount saved are shown.
• Discount ring: an SVG ring progress fills as slots are filled; on reaching the goal the ring turns the accent color and pops out a check mark and the discount percentage.
• When the slots are full, unselected products are disabled; click a slot or an already-selected product to remove it.

Accessibility

• Products are native buttons carrying aria-pressed to mark their selected state, with an aria-label containing the name and price.
• The remove key on a slot carries an aria-label of "Remove … from the bundle"; the discount ring is decorative and marked aria-hidden.
• Selection progress and unlock state are announced immediately through a role="status" aria-live region.
• When the user has "reduce motion" enabled at the system level, the FLIP, the rolling numbers, and the discount ring all land instantly with no transition animation.