Tip percentage chips with the amount under each one, a custom amount field, and a total that rolls to the new value.
npx shadcn@latest add https://hyperblur.dev/r/pay-tip-selector.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-tip-selector.tsx.
import { PayTipSelector } from "@/components/hyperblur/pay-tip-selector"
<PayTipSelector subtotal={4200} defaultPercent={15} onChange={(tip) => setTip(tip.amount)} />| Prop | Type | Default | Description |
|---|---|---|---|
| subtotal | number | 4200 | Order subtotal in minor units (cents). |
| currency | string | "$" | Currency symbol put in front of every amount. |
| options | number[] | [10, 15, 20] | Tip percentages offered next to No tip. |
| percent | number | null | Controlled percent. Use null for the custom amount. Pair with onChange. | |
| defaultPercent | number | null | 15 | Initial percent when uncontrolled. Use null to start on custom. |
| onChange | (tip: { percent: number | null; amount: number; total: number }) => void | Called when the percent or the custom amount changes. Amounts are in minor units. | |
| title | string | "Add a tip" | Header text. |
| note | string | "100% goes to the team" | Muted text next to the header. Hidden when empty. |
| allowCustom | boolean | true | Show the Custom chip and its amount field. |
| accent | string | "#2f7bff" | Selected chip and focus color. |