fetaUI
GitHub

Tip Selector

A tape measure for tipping. Drag it under a fixed needle, or pick a chip.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/tip-selector
Playground
Tip SamYour courier · 6 min early
$7.6718% of $42.60
Subtotal
$42.60
Tip · 18%
$7.67
Total
$50.27
No tip
Tip SamYour courier · 6 min early
$0.00No tip
Subtotal
$42.60
Tip
$0.00
Total
$42.60
Icons animation
Fail next action
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/tip-selector

Accessibility

  • The tape is a slider whose text value includes the amount.
  • Chips are toggle buttons.

Motion

  • The tape rubber bands past the ends and settles on a 420 and 42 spring.
  • The tip amount rolls.
  • With reduced motion, it moves at once.

Responsive behavior

  • 344 by 72 on Web and 350 by 84 on Mobile.

Performance

  • The tape moves on a motion value, and state changes only at whole percents.
  • Ticks are built once in a memo.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import TipSelector from @/components/fetaui/tip-selector. It composes Button.
  • onPlaceOrder gets the total. Resolve to show Paid. A rejection returns to Place order and shows failedMessage under the amount.
  • The tape runs 0 to 30 percent. Round up does not fire onPercentChange, so use the total from onPlaceOrder.
  • The demo waits a timer and charges nothing.
/docs/components/tip-selector/markdown
PreviousSlot Picker
NextCalendar Schedule

Related

Amount PadComponentA send money keypad. The amount grows as you type and the send button carries it.SliderComponentPick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Toggle GroupComponentToggles on one tray, for a single choice or several.