fetaUI
GitHub

Credit Top-up

Balance with runway and a 14 day trend, credit packs, a custom amount, auto top-up and Buy.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/credit-top-up
Playground
Credit balance

5,774 credits

About 15 days left at 387 a day
Last 14 days
Add credits$10 per 1,000
Custom amount5,500 credits
Auto top-upRefills with your selected amount
Refill when below
Card ending 4242Expires 08/2028
5,500 creditsIncludes 500 bonus$50.00

Simulated checkout. Credits never expire.

Running low
Credit balanceRunning low

774 credits

About 2 days left at 387 a day
Last 14 days
Add credits$10 per 1,000
Custom amount5,500 credits
Auto top-upRefills with your selected amount
Refill when below
Card ending 4242Expires 08/2028
5,500 creditsIncludes 500 bonus$50.00

Simulated checkout. Credits never expire.

Icons animation
Running low
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/credit-top-up

Accessibility

  • The trend is one image with a text description.
  • Running low is a label and a mark.
  • Packs are native radios.

Motion

  • The panel fades in and rises 8 px over 400 ms, once.
  • Rows fade in over 240 ms with a 40 ms stagger.
  • Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
  • With reduced motion, the panel appears in place and values swap at once.

Responsive behavior

  • 480 wide on Web and 358 on Mobile.
  • Touch targets stay at 44 on Mobile.

Performance

  • Trend bars scale on a transform, with one element per value in trend.
  • The balance and price tween by writing text directly, so React does not render per frame.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CreditTopUp from @/components/fetaui/credit-top-up. It composes Radio, Slider, Switch, Tabs and Button with Panel, Body and Tween from data-kit.
  • onBuy receives credits, price and the auto top-up settings. Credits include a pack's bonus. onAutoTopUpChange fires with enabled and below whenever the switch or refill threshold changes.
  • Running low shows when balance over dailyUse rounds below lowAfterDays. A dailyUse of 0 reads No recent use. Auto top-up starts off in that case, and only on first mount.
  • rate sets the custom price per credit and the per 1,000 label. refillOptions, defaultRefill and defaultAutoTopUp set the refill choices. note replaces the simulated checkout line.
/docs/components/credit-top-up/markdown
PreviousCheckout
NextPlan Card

Related

CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Usage MeterComponentA metric against its limit, with an 8 px track and a plain hint. State comes from the numbers.Usage OverviewProBlockSpend against budget with a projection, the plan, and metered usage with warning and danger states.Payment MethodComponentA saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.