Cost Calculator
Estimate costs from adjustable usage inputs.
Preview
Import
import { CostCalculator } from "@sigil-ui/components";Usage
<CostCalculator
sliders={[
{ label: "Active users", value: 1500, unit: "users", min: 0, max: 10000, step: 100 },
{ label: "API calls", value: 250000, unit: "/mo", min: 0, max: 1000000, step: 10000 },
]}
estimate={{ brandName: "Sigil", brandCost: 175, competitorName: "Other", competitorCost: 420, savingsNote: "Includes 90% utilization." }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sliders (required) | CostSlider[] | — | Sliders configuration. |
estimate (required) | CostEstimate | — | Estimate configuration. |
sliderRenderer | (slider: CostSlider) => ReactNode | — | Slider Renderer configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-border-style | Border style |
--s-radius-md | Radius md |
--s-card-padding | Card padding |
--s-surface | Surface |
--s-border-muted | Border muted |
--s-font-mono | Font mono |
--s-text-muted | Text muted |
--s-text-secondary | Text secondary |
--s-primary | Primary |
--s-text | Text |
--s-radius-full | Radius full |