Tip Selector
Percentage tip buttons that show the cash amount under each, plus a Custom option that opens a small input.
tip-selector.tsxtip-selector.css
Checking access…
Overview
Each preset shows both the percent and what it comes to, so people do not have to do maths. The selection pill slides between them.
Custom opens an amount field in place of the row’s helper text; the total line updates live.
When to use
- Delivery, rides, restaurant and creator tipping.
When not to use
- Fixed fees: show them as line items.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/tip-selector.json$
npx shadcn@latest add https://sundaeui.dev/r/tip-selector.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/tip-selector.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/tip-selector.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy tip-selector.tsx and tip-selector.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { TipSelector } from '@/components/sundae/tip-selector'
<TipSelector />Props
| Prop | Type | Default |
|---|---|---|
amount*Bill in cents. | number | — |
presetsPercent options. | number[] | [10, 15, 20] |
onTipChangeCalled on change. | (cents: number) => void | — |
currencyISO currency. | string | 'USD' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A radiogroup of presets including Custom; the custom field is labelled.
- The total is announced politely.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-tip; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Tip Selector free?
- Tip Selector is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Tip Selector?
- Run npx shadcn@latest add https://sundaeui.dev/r/tip-selector.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Tip Selector support keyboard and screen readers?
- A radiogroup of presets including Custom; the custom field is labelled. The total is announced politely.
- Does Tip Selector respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Payment Methods
Checkout · Refined - Pro
Receipt Card
Checkout · Refined - Pro
Gift Card
Checkout · Refined