UsageEstimate
A usage-pricing calculator that needs no script.
| Free hours5 h × $0.00 | $0.00 |
|---|---|
| Recorded hours35 h × $0.36 | $12.60 |
| Per month | $12.60 |
Everyone in the workspace reads the notes free.
View code
<UsageEstimate
action="#pricing"
fields={
<TextField label="Recorded hours a month" type="number" name="hours" defaultValue="40" />
}
submitLabel="Estimate"
bill={
<UsageEstimate.Bill
label="Estimated monthly bill"
rows={[
{ label: "Free hours", detail: "5 h × $0.00", amount: "$0.00" },
{ label: "Recorded hours", detail: "35 h × $0.36", amount: "$12.60" },
]}
total={{ label: "Per month", amount: "$12.60" }}
footnote="Everyone in the workspace reads the notes free."
/>
}
/>
// Live: the bill is a frame the page's route answers for X-Remix-Target "pricing-bill"
// <UsageEstimate action="#pricing" fields={…} submitLabel="Estimate" live={{ frame: "pricing-bill", src: "/?hours=40" }} />Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
- CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
- Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
- plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
- UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
- QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { UsageEstimate } from "@sdxc/ui/landing";A GET form beside its bill on one card, side by side from 40rem, the sheet ruled in
--ui-landing-hairline; with no script a submit reloads the page on the new bill. For live,
map UsageEstimateLive (@sdxc/ui/landing/usage-estimate) to re-price while typing.
Composition
The parts the component publishes, each a static property of the host.
UsageEstimateUsageEstimate.BillThe bill a calculator shows: its lines and total in a column of tabular figures, then the footnote and the CTA at the sheet's foot.
Examples
<UsageEstimate
action="#pricing"
fields={<TextField label="Hours a month" type="number" name="hours" defaultValue="40" />}
submitLabel="Estimate"
live={{ frame: "pricing-bill", src: "/?hours=40" }}
/>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
UsageEstimate.Bill
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Accessible name of the bill's table, such as "Estimated monthly bill". |
rows | readonly Row[] | Yes | The bill's lines, in the order they add up. |
total | Row | Yes | The sum, set larger under a rule. |
footnote | RemixNode | No | A line under the total, such as what the price leaves out. |
cta | RemixNode | No | The page's next step under the bill, such as its primary CTA. |