Tiered Price Configurator

Pricing

About

Configurateur de prix par paliers. L'acheteur choisit un niveau et le total, la mensualite et les caracteristiques techniques s'animent ensemble. Concu pour les produits a panier eleve ou le prix seul bloque la decision. Couleurs et libelles pilotes par props, aucune dependance a un theme.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tiered Price Configurator to your project and fits it to your theme.

Code

How Tiered Price Configurator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Configurator from "@/components/ui/tiered-price-configurator";
import type { ConfiguratorStage } from "@/components/ui/tiered-price-configurator";

const STAGES: ConfiguratorStage[] = [
  {
    id: "origine",
    name: "Origine",
    sub: "Configuration d'usine",
    add: 0,
    note: { tone: "ok", text: "Homologuée route" },
    includes: ["Bridage L1e conservé", "Carte grise et plaque", "Garantie constructeur intacte"],
    metrics: { couple: 250, vitesse: 45, autonomie: 65, poids: 57 },
  },
  {
    id: "stage-1",
    name: "Stage 1",
    sub: "Le réveil",
    add: 690,
    note: { tone: "warn", text: "Terrain privé uniquement" },
    includes: ["Contrôleur reprogrammé", "Refroidissement renforcé", "Réglage sur banc"],
    metrics: { couple: 280, vitesse: 62, autonomie: 70, poids: 57 },
    warning:
      "Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
  },
  {
    id: "stage-2",
    name: "Stage 2",
    sub: "Le terrain",
    add: 1890,
    note: { tone: "warn", text: "Terrain privé uniquement" },
    includes: ["Suspensions revues", "Roues renforcées", "Freinage revu"],
    metrics: { couple: 310, vitesse: 78, autonomie: 74, poids: 59 },
    warning:
      "Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
  },
  {
    id: "ultimate",
    name: "Ultimate",
    sub: "La piste",
    add: 3990,
    note: { tone: "warn", text: "Terrain privé uniquement" },
    includes: ["Batterie haute densité", "Transmission complète", "Préparation intégrale au banc"],
    metrics: { couple: 380, vitesse: 95, autonomie: 105, poids: 63 },
    warning:
      "Cette configuration n'est plus homologuée. Elle se roule sur terrain privé ou circuit fermé.",
  },
];

const METRICS = [
  { key: "couple", label: "Couple", unit: "Nm" },
  { key: "vitesse", label: "Vitesse", unit: "km/h" },
  { key: "autonomie", label: "Autonomie", unit: "km" },
  { key: "poids", label: "Poids", unit: "kg" },
];

export default function Demo() {
  return (
    <div className="mx-auto max-w-5xl p-6">
      <Configurator
        basePrice={4490}
        stages={STAGES}
        metrics={METRICS}
        installments={12}
        accent="#FF4D17"
        panel="#1B1F26"
        labels={{
          legend: "Niveau de préparation",
          included: "Ce que comprend ce niveau",
          total: "Total configuré",
          perPayment: "par mois en 12 fois sans frais",
          submit: "Ajouter au panier",
          free: "inclus",
        }}
        onSubmit={(stage, total) => {
          console.log("Ajout au panier", stage.id, total);
        }}
      />
    </div>
  );
}