Quote Estimator
A step-by-step "what do you need?" form that shows a live price range. Turns a contact page into lead qualification.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/quote-estimatorProps
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | EstimatorStep[] | - | The questions, in order. |
basePrice | number | 0 | Added before any option, e.g. a setup fee. |
spread | number | 0.15 | Width of the range around the estimate: 0.15 shows ±15%. |
roundTo | number | 100 | The range is rounded to this step. |
currency | string | "USD" | ISO 4217 currency code. |
locale | string | "en-US" | Locale used to format prices. |
onSubmit | (result: QuoteResult) => void | - | Called on the last step with { answers, range }. answers maps step ids to the chosen option ids. |
submitLabel | string | "Send my brief" | Label of the final button. |
title | string | "Estimate your project" | Small heading above the progress bar. |
className | string | - | Extra classes for the root element. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element. |