Loyalty Program Dashboard

Installation

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

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

Usage

The file also exports ecommerce21Demo, 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 { Ecommerce21, ecommerce21Demo } from "@/components/blocks/ecommerce/ecommerce21";

export default function Page() {
  return <Ecommerce21 {...ecommerce21Demo} />;
}

Props

Types

type LoyaltyBenefit = {
  name: string;
  pointsCost: number;
  description: string;
};

type EarningOpportunity = {
  label: string;
  points: number;
};

Behavior notes

• This is a static display dashboard, not an interactive redemption flow: each benefit card's "Redeem" button has no click handler, since actually redeeming points requires a backend to debit the member's balance, which this block doesn't have.
• The progress bar fill is computed at render time from currentPoints / pointsForNextTier (clamped to 100%); it's a plain server component, there's no animation or client state involved.
• If currentPoints already meets or exceeds pointsForNextTier, the caption below the bar switches from "N points to reach {nextTier}" to "You've reached {nextTier}" instead of showing a negative number.