Iurii Rogulia

Posted on Jun 17 • Originally published at iurii.rogulia.fi

Building a React Product Configurator with Zustand and Motion

#nextjs #react #typescript #daisyui

Product configuration forms have a deceptively simple interface: the user picks options, a preview updates, a price changes. In practice, the form state is a deeply nested object with 15 fields that have complex dependencies. The preview needs to stay in sync with the form in real time. The price calculation has edge cases for every combination of options. And the whole thing needs to feel responsive — immediate feedback, smooth transitions, no jank.

I built the product configurator for pikkuna.fi — an interactive configurator for custom vinyl curtains and roofing panels with real-time SVG preview, trapezoid shape support, 12 configurable parameters, and price calculation that updates as you type. This is the architecture that makes it work.

The State Problem

slug="e-commerce"
text="Building a product configurator for your e-commerce store — with real-time pricing, live preview, and cart integration? This is the kind of interactive UI I build for EU brands."
/>

Before any UI, the question is: what does the state object look like, and who owns it?

For a simple form with 3 fields, useState is fine. For a configurator with 12 interdependent fields, it becomes a maintenance problem. When filmType changes, the available borderColor options change. When width or height is set outside the valid bounds, it should clamp. When zipDoor is disabled, doorWidth and doorOffset should reset to 0. These invariants need to be enforced somewhere, and enforcing them inside component onChange handlers produces scattered logic that's hard to reason about.

The solution: Zustand with explicit invariant enforcement in the store actions.

// store/configurator.ts
import { create } from "zustand";
import { nanoid } from "nanoid";

export type FilmType = "clear" | "tinted" | "mosquito" | "clearRoof";
export type BorderColor = "white" | "black" | "gray" | "brown" | "beige";
export type MountingType = "wall" | "post" | "ceiling" | "side" | "angle";
export type ProductType = "pikkuna" | "pikkuroof";

interface ConfiguratorState {
  // Product type
  productType: ProductType;

  // Dimensions (in cm)
  width: number;
  leftHeight: number;
  rightHeight: number;

  // Material
  filmType: FilmType;
  borderColor: BorderColor;

  // Mounting
  mountingType: MountingType;
  mountingCount: number;

  // Optional: zipper door
  zipDoor: boolean;
  doorWidth: number;
  doorOffset: number;

  // Derived / UI state
  configId: string; // Changes on every modification — drives SVG re-render key
  isDirty: boolean; // True if user has changed anything from defaults
  calculatedPrice: number | null;
}

interface ConfiguratorActions {
  setProductType: (type: ProductType) => void;
  setWidth: (width: number) => void;
  setLeftHeight: (height: number) => void;
  setRightHeight: (height: number) => void;
  setFilmType: (film: FilmType) => void;
  setBorderColor: (color: BorderColor) => void;
  setMountingType: (type: MountingType) => void;
  setMountingCount: (count: number) => void;
  setZipDoor: (enabled: boolean) => void;
  setDoorWidth: (width: number) => void;
  setDoorOffset: (offset: number) => void;
  reset: () => void;
}

const DEFAULTS: ConfiguratorState = {
  productType: "pikkuna",
  width: 200,
  leftHeight: 150,
  rightHeight: 150,
  filmType: "clear",
  borderColor: "white",
  mountingType: "wall",
  mountingCount: 2,
  zipDoor: false,
  doorWidth: 0,
  doorOffset: 0,
  configId: nanoid(6),
  isDirty: false,
  calculatedPrice: null,
};

// Dimension constraints by product type
const CONSTRAINTS = {
  pikkuna: { minWidth: 50, maxWidth: 600, minHeight: 50, maxHeight: 400 },
  pikkuroof: { minWidth: 50, maxWidth: 800, minHeight: 50, maxHeight: 600 },
};

// Available border colors by film type — some combinations don't exist
const BORDER_COLOR_RESTRICTIONS: Partial<Record<FilmType, BorderColor[]>> = {
  mosquito: ["white", "black"],
  clearRoof: ["white", "black", "gray"],
};

function clampDimension(value: number, min: number, max: number): number {
  return Math.max(min, Math.min(max, Math.round(value)));
}

export const useConfiguratorStore = create<ConfiguratorState & ConfiguratorActions>()(
  (set, get) => ({
    ...DEFAULTS,

    setProductType: (productType) => {
      const constraints = CONSTRAINTS[productType];
      const current = get();

      // Re-clamp dimensions to new product's constraints
      set({
        productType,
        width: clampDimension(current.width, constraints.minWidth, constraints.maxWidth),
        leftHeight: clampDimension(
          current.leftHeight,
          constraints.minHeight,
          constraints.maxHeight
        ),
        rightHeight: clampDimension(
          current.rightHeight,
          constraints.minHeight,
          constraints.maxHeight
        ),
        configId: nanoid(6),
        isDirty: true,
        calculatedPrice: null, // Invalidate price on product type change
      });
    },

    setWidth: (width) => {
      const { productType } = get();
      const { minWidth, maxWidth } = CONSTRAINTS[productType];
      set({
        width: clampDimension(width, minWidth, maxWidth),
        configId: nanoid(6),
        isDirty: true,
        calculatedPrice: null,
      });
    },

    setFilmType: (filmType) => {
      const current = get();
      const restrictedColors = BORDER_COLOR_RESTRICTIONS[filmType];

      // If current border color is not available for the new film type, reset to first allowed
      const borderColor =
        restrictedColors && !restrictedColors.includes(current.borderColor)
          ? restrictedColors[0]
          : current.borderColor;

      set({
        filmType,
        borderColor,
        configId: nanoid(6),
        isDirty: true,
        calculatedPrice: null,
      });
    },

    setZipDoor: (zipDoor) => {
      set({
        zipDoor,
        // Reset door dimensions when disabling — prevents stale values
        doorWidth: zipDoor ? get().doorWidth : 0,
        doorOffset: zipDoor ? get().doorOffset : 0,
        configId: nanoid(6),
        isDirty: true,
        calculatedPrice: null,
      });
    },

    // ... other setters follow the same pattern

    reset: () => set({ ...DEFAULTS, configId: nanoid(6), isDirty: false }),
  })
);

The configId pattern is the key to performance: every time configuration changes, nanoid generates a new ID. This ID is used as a React key on the SVG preview component when we want forced remount, or as a useMemo dependency when we want recalculation. Instead of diffing 12 fields to know whether the preview needs updating, we compare one string.

Price Calculation

Price calculation lives in a pure function outside the store. Pure functions are easier to test, easier to reason about, and easier to swap out when pricing changes.

// lib/pricing/calculate-price.ts
import type { ConfiguratorState } from "@/store/configurator";

interface PriceBreakdown {
  basePrice: number; // Material + area price
  filmPremium: number; // Tinted/mosquito add-on
  mountingPrice: number; // Mounting hardware
  zipDoorPrice: number; // Optional zipper door
  total: number;
  totalWithVat: number;
  vatAmount: number;
  vatRate: number;
  currency: string;
}

// Price per square meter by film type (EUR)
const FILM_PRICE_PER_SQM: Record<string, number> = {
  clear: 45,
  tinted: 65,
  mosquito: 75,
  clearRoof: 55,
};

const MOUNTING_PRICE: Record<string, number> = {
  wall: 15,
  post: 20,
  ceiling: 25,
  side: 18,
  angle: 22,
};

const ZIP_DOOR_BASE_PRICE = 45;
const ZIP_DOOR_PER_CM_HEIGHT = 0.35;

export function calculatePrice(
  config: Pick<
    ConfiguratorState,
    | "productType"
    | "width"
    | "leftHeight"
    | "rightHeight"
    | "filmType"
    | "mountingType"
    | "mountingCount"
    | "zipDoor"
    | "doorWidth"
  >,
  vatRate: number = 0.255 // Finland 25.5%
): PriceBreakdown {
  // Area in square meters — trapezoid area formula
  const avgHeight = (config.leftHeight + config.rightHeight) / 2;
  const areaSqm = (config.width * avgHeight) / 10_000; // cm² to m²

  const filmPricePerSqm = FILM_PRICE_PER_SQM[config.filmType] ?? FILM_PRICE_PER_SQM.clear;
  const basePrice = areaSqm * filmPricePerSqm;

  // Film type premium is already included in the per-sqm price
  const filmPremium = 0;

  // Mounting: price per mounting point × count
  const mountingUnitPrice = MOUNTING_PRICE[config.mountingType] ?? 0;
  const mountingPrice = mountingUnitPrice * config.mountingCount;

  // Zipper door: flat fee + per cm of door height
  const zipDoorPrice = config.zipDoor
    ? ZIP_DOOR_BASE_PRICE + config.doorWidth * ZIP_DOOR_PER_CM_HEIGHT
    : 0;

  const subtotal = basePrice + filmPremium + mountingPrice + zipDoorPrice;
  const vatAmount = Math.round(subtotal * vatRate * 100) / 100;
  const total = Math.round(subtotal * 100) / 100;
  const totalWithVat = Math.round((subtotal + vatAmount) * 100) / 100;

  return {
    basePrice,
    filmPremium,
    mountingPrice,
    zipDoorPrice,
    total,
    totalWithVat,
    vatAmount,
    vatRate,
    currency: "EUR",
  };
}

The store's calculatedPrice field is null whenever configuration changes — it's invalidated eagerly. The price is calculated lazily, on demand, when the UI needs to display it:

// In the price display component
const config = useConfiguratorStore();
const price = useMemo(
  () => calculatePrice(config, vatRate),
  [config.configId] // Recalculate only when configId changes
);

Using configId as the memo dependency is more reliable than listing every field individually — you can't accidentally forget to add one.

DaisyUI Component Integration

DaisyUI's component system works well for configurators because the semantic class names map directly to configuration concepts. A radio group for film type selection:

// components/configurator/FilmTypeSelector.tsx
"use client";

import { useConfiguratorStore } from "@/store/configurator";
import type { FilmType } from "@/store/configurator";

const FILM_OPTIONS: Array<{ value: FilmType; label: string; description: string }> = [
  { value: "clear", label: "Clear", description: "Maximum light transmission" },
  { value: "tinted", label: "Tinted", description: "UV protection, reduced glare" },
  { value: "mosquito", label: "Mosquito", description: "Insect protection mesh" },
  { value: "clearRoof", label: "Roof Clear", description: "For horizontal installations" },
];

export function FilmTypeSelector() {
  const { filmType, setFilmType } = useConfiguratorStore((state) => ({
    filmType: state.filmType,
    setFilmType: state.setFilmType,
  }));

  return (
    <div className="form-control gap-2">
      <label className="label">
        <span className="label-text font-medium">Film Type</span>
      </label>
      <div className="grid grid-cols-2 gap-2">
        {FILM_OPTIONS.map(({ value, label, description }) => (
          <label
            key={value}
            className={`card cursor-pointer border-2 p-3 transition-colors ${
              filmType === value
                ? "border-primary bg-primary/5"
                : "border-base-300 hover:border-primary/50"
            }`}
          >
            <input
              type="radio"
              className="hidden"
              name="filmType"
              value={value}
              checked={filmType === value}
              onChange={() => setFilmType(value)}
            />
            <span className="text-sm font-medium">{label}</span>
            <span className="text-xs text-base-content/60">{description}</span>
          </label>
        ))}
      </div>
    </div>
  );
}

The Zustand selector (state) => ({ filmType: state.filmType, setFilmType: state.setFilmType }) is important for performance. Without it, the component would re-render on every store change — including changes to width, borderColor, etc. that this component doesn't use. The selector makes the component re-render only when filmType changes.

Motion Animations for Smooth Transitions

Motion (formerly Framer Motion) handles three animation concerns in the configurator:

Parameter panel transitions — when switching between dimension, material, and mounting panels
Preview opacity — a subtle fade when the configuration is stale (being updated)
Price change animation — a brief highlight when the price updates

// components/configurator/ConfiguratorPanels.tsx
"use client";

import { motion, AnimatePresence } from "motion/react";
import { useState } from "react";

type PanelId = "dimensions" | "material" | "mounting" | "options";

const PANELS: Array<{ id: PanelId; label: string }> = [
  { id: "dimensions", label: "Size" },
  { id: "material", label: "Material" },
  { id: "mounting", label: "Mounting" },
  { id: "options", label: "Options" },
];

export function ConfiguratorPanels() {
  const [activePanel, setActivePanel] = useState<PanelId>("dimensions");

  return (
    <div>
      {/* Tab bar */}
      <div className="tabs tabs-bordered mb-4" role="tablist">
        {PANELS.map(({ id, label }) => (
          <button
            key={id}
            role="tab"
            className={`tab ${activePanel === id ? "tab-active" : ""}`}
            onClick={() => setActivePanel(id)}
          >
            {label}
          </button>
        ))}
      </div>

      {/* Panel content with animated transitions */}
      <AnimatePresence mode="wait">
        <motion.div
          key={activePanel}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: 0.15, ease: "easeOut" }}
        >
          {activePanel === "dimensions" && <DimensionsPanel />}
          {activePanel === "material" && <MaterialPanel />}
          {activePanel === "mounting" && <MountingPanel />}
          {activePanel === "options" && <OptionsPanel />}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

mode="wait" on AnimatePresence means the exit animation of the current panel completes before the enter animation of the next panel starts. Without it, both panels animate simultaneously and the layout shifts. For a 150ms transition, "wait" mode doesn't feel slow.

useDeferredValue for SVG Performance

The SVG preview re-renders on every dimension change. If a user types "200" into the width field, that's three keystrokes triggering three renders. The calculation inside the SVG component — trapezoid geometry, zipper door position, adaptive scaling — takes ~2ms. Three renders of 2ms each is fine. But if you have a slower device, or the calculation is more expensive, this can cause visible input lag.

useDeferredValue defers the SVG update so the input field remains responsive:

// components/configurator/ConfiguratorLayout.tsx
"use client";

import { useDeferredValue } from "react";
import { useConfiguratorStore } from "@/store/configurator";
import { PikkunaSVGPreview } from "./PikkunaSVGPreview";

export function ConfiguratorLayout() {
  const config = useConfiguratorStore();

  // Defer the values used by the expensive SVG component
  const deferredConfigId = useDeferredValue(config.configId);
  const isStale = config.configId !== deferredConfigId;

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      {/* Left: configuration form */}
      <div>
        <ConfiguratorPanels />
        <PriceDisplay />
      </div>

      {/* Right: SVG preview */}
      <div className={`transition-opacity duration-150 ${isStale ? "opacity-60" : "opacity-100"}`}>
        <PikkunaSVGPreview
          // Pass deferred config values to the expensive component
          width={config.width}
          leftHeight={config.leftHeight}
          rightHeight={config.rightHeight}
          filmType={config.filmType}
          borderColor={config.borderColor}
          zipDoor={config.zipDoor}
          doorWidth={config.doorWidth}
          doorOffset={config.doorOffset}
          key={deferredConfigId} // Forces re-render only when deferred value changes
        />
      </div>
    </div>
  );
}

The isStale flag drives the opacity change — when you're actively typing, the preview dims slightly to indicate it's about to update. This is the same approach used in the production pikkuna.fi configurator, where the INP stays under 200ms even on mid-range devices.

Accessibility

A few things that are easy to miss:

Radio groups need name attributes. Without name="filmType", all radio inputs in the DOM are in the same group, and selecting one deselects others across different groups. name scopes the grouping.

Range inputs need visible value display. Screen readers can read a range input's value, but sighted users can't tell what number the slider represents without a label. Always show the current value next to the slider: Width: {width} cm.

Color pickers need text alternatives. If you show border color options as colored swatches, each swatch needs an aria-label="White border" (or similar) — color alone is not accessible.

Focus management after panel switch. When the user switches to the "Mounting" panel, focus should move to the first interactive element in that panel, not stay on the tab button. Use autoFocus on the first input in each panel, or manage focus explicitly with ref.focus() after AnimatePresence completion.

Product Configuration → Cart State

When the user finishes configuring and adds to cart, the configurator state needs to become a cart item. I use nanoid for a stable cart item ID:

// lib/cart/add-to-cart.ts
import { nanoid } from "nanoid";
import type { ConfiguratorState } from "@/store/configurator";
import type { PriceBreakdown } from "@/lib/pricing/calculate-price";

export interface CartItem {
  id: string; // nanoid — stable identifier for cart operations
  productType: string;
  configuration: Omit<ConfiguratorState, "configId" | "isDirty" | "calculatedPrice">;
  price: PriceBreakdown;
  addedAt: string; // ISO timestamp
}

export function createCartItem(config: ConfiguratorState, price: PriceBreakdown): CartItem {
  return {
    id: nanoid(),
    productType: config.productType,
    configuration: {
      width: config.width,
      leftHeight: config.leftHeight,
      rightHeight: config.rightHeight,
      filmType: config.filmType,
      borderColor: config.borderColor,
      mountingType: config.mountingType,
      mountingCount: config.mountingCount,
      zipDoor: config.zipDoor,
      doorWidth: config.doorWidth,
      doorOffset: config.doorOffset,
    },
    price,
    addedAt: new Date().toISOString(),
  };
}

The cart item snapshot includes everything needed to recreate the SVG preview in the cart view — the same PikkunaSVGPreview component used in the configurator reuses the same configuration object to render the cart thumbnail.

Performance Checklist

The questions I ask before shipping a configurator:

Does typing in a dimension field feel immediate? (Check with useDeferredValue + isStale opacity indicator)
Does switching between options (film type, color) feel instant? (Zustand updates are synchronous, this should be fine)
Does the price update after I stop typing, or on every keystroke? (Throttle or debounce if the calculation is expensive — for simple pricing, every keystroke is fine)
Is the SVG re-render causing visible frame drops? (Profile with React DevTools, look for long renders in the Profiler tab)
Does the configurator work on mobile? (Touch events, adequate hit targets, no hover-only interactions)

If you need a product configurator — custom dimensions, real-time preview, complex pricing logic — get in touch. I've built this in production for pikkuna.fi with SVG rendering, trapezoid geometry, and server-side preview generation for order confirmation emails. Once the customer places an order, the same platform handles fully automated order fulfillment through e-commerce automation services. I'm available for freelance projects and long-term engagements.

Related project: Pikkuna SVG Product Configurator — the production system this article describes.

Further reading:

DEV Community