LoyaltyDots

A client's loyalty card as stamps: one a visit up to the studio's reward visit — a check for each done, the number of each to come, a gift on the reward's.

Toward the reward

Every 6th visit is the reward: four visits done, two to go. The 5th shows its number; the 6th, the reward visit, a gift.

import { LoyaltyDots } from "@/components/shared/loyalty-dots";

<LoyaltyDots visits={4} of={6} label="4 of 6 visits" />

Reward ready

Five done: their next visit gets the reward, and its stamp turns butter.

<LoyaltyDots visits={5} of={6} label="Your next visit is 50% off" />

Lengths

A studio rewards anything from every 3rd to every 20th visit; the row wraps when it runs out of room.

213141516171819

<LoyaltyDots visits={1} of={3} label="1 of 3 visits" />
<LoyaltyDots visits={12} of={20} label="12 of 20 visits" />

API reference

Prop	Type	Default	Description
visits	number	—	Visits toward the reward, 0 to of − 1.
of	number	—	The visit that gets the reward: every Nth.
label	string	—	What the stamps say, for assistive tech: “4 of 6 visits”.
className	string	—	Placement.

Guidelines

Show a client their own card only once the conversation knows them; a typed phone shows nothing.
Say it in words beside the stamps too: they're for a glance.
Never make them look pressable: flat, no shadow, no hover. They show a card; they don't act.