Estimated saving
A savings card leading on a large figure and a change chip, then comparing the old and new spend on two aligned rows.
The import and the props worth knowing about, in one place.
import { Money23 } from "@/components/beste/piece/money23";
<Money23
surface="card"
bordered={true}
inverted={false}
label="Estimated saving"
amount="$1,840"
period="per month"
delta="38% lower"
rows={[
{
"label": "Four tools today",
"amount": "$4,820",
"muted": true
},
{
"label": "One workspace",
"amount": "$2,980"
}
]}
/>Balance card that counts its big figure up from zero with an ease-out curve, then brings income and spending in behind it, each counting up to its own total.
Practice
PopularA compact plan card with a name, an optional highlight badge, a price with period, and a short list of included features.
Payment card that swings in from a slight 3D angle, uncovers its masked number one group at a time, and fades in the holder name and expiry last.
Checkout sheet whose pay button turns into a spinner, then a green check with a ring rippling out of it, before resetting for the next run.