How do I calculate the points balance shown here?

This block just displays the points number you pass in. Award points server-side, for example on every successful invoice payment, and fetch the running total before rendering the component.

How does the progress bar percentage get calculated?

You supply progressToNextTier directly as a 0-100 number, the component doesn't derive it from points and a threshold itself. Compute it as current tier points divided by the points needed for the next tier before passing it in.

What happens when I click Redeem points?

It navigates to redeemHref, nothing more. Point that at a page or flow where the customer picks a specific reward and your backend deducts the corresponding points.

Can I hide the redemption options list?

Yes, just omit redemptionOptions or pass an empty array and that section won't render.

How do I show a different tier name, like Platinum instead of Gold?

tierLabel is a plain string, pass whatever tier name applies. There's no fixed list of tier names built into the component.

Is this block optimized for mobile dashboards?

Yes, it's a single-column max-w-md card, so the points total and progress bar stay easy to read on a phone-width billing portal.

Billing Loyalty Points Summary

A loyalty points summary for subscriber reward programs. It shows the current point balance, a tier badge, an optional progress bar toward the next tier, a list of what points can be redeemed for, and a note about points that are about to expire. Built for SaaS billing portals that reward long-term subscribers and want to make that balance feel tangible without a heavier rewards dashboard.

By Staaarter Team

Billing

Updated June 15, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-loyalty-points-summary.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing71.tsx instead.

Usage

The file also exports billing71Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing71, billing71Demo } from "@/components/blocks/billing/billing71";

export default function Page() {
  return <Billing71 {...billing71Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Loyalty rewards"	Heading shown at the top of the card.
tierLabel	string	none	Membership tier shown as a badge, e.g. "Gold member".
points	number	none	Current point balance, shown formatted with thousands separators.
nextTierLabel	string	none	Name of the next tier. Required along with progressToNextTier to show the progress bar.
pointsUntilNextTier	number	none	Points still needed to reach nextTierLabel, shown as caption text under the progress bar.
progressToNextTier	number	none	0-100 percent complete toward nextTierLabel. Clamped to that range before rendering.
expiringPoints	number	none	Points about to expire. Only shown when greater than 0 and expiringDate is also set.
expiringDate	string	none	Date the expiringPoints amount expires, shown as plain text.
redemptionOptions	LoyaltyRedemptionOption[]	none	Optional list of what points can be redeemed for, each with a point cost.
redeemHref	string	none	When set, shows a 'Redeem points' button linking to this URL.
redeemLabel	string	"Redeem points"	Label on the redeem button.
className	string	none	Extra classes for the outer container.

Types

interface LoyaltyRedemptionOption {
  id: string;
  label: string;
  pointsCost: number;
}

Behavior notes

This is a static display block, there's no client-side state or animation, every value renders directly from props on each render.
The progress bar only renders when both progressToNextTier and nextTierLabel are provided; progressToNextTier is clamped between 0 and 100 before being used as the bar's width.
points and pointsUntilNextTier are formatted with toLocaleString for thousands separators, so pass plain numbers rather than pre-formatted strings.
The expiring-points note only shows when expiringPoints is greater than 0 and expiringDate is also set, both conditions have to be true.
The redeem button is a next/link, not a modal trigger, so wire redeemHref to wherever your actual redemption flow lives.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.