Email Preferences With Live VolumePRO

Settings67: Email Preferences With Live Volume

A subscription preference list where each list states how often it sends, and the figure underneath recomputes the monthly email volume as boxes are ticked, down to a stated zero.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/settings67?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/settings67?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/settings67.tsx, the badge6 eyebrow and button1 save button it renders through, and the shadcn/ui checkbox primitive behind each row.

Quick start

The installed file exports settings67Demo alongside the block: the exact props behind the preview above. Spread it to get a working preference panel in one line.

import { Settings67, settings67Demo } from "@/components/beste/block/settings67";

export default function PreferencesPage() {
  return <Settings67 {...settings67Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Settings67 } from "@/components/beste/block/settings67";

export default function PreferencesPage() {
  return (
    <Settings67
      eyebrow="Email preferences"
      heading="Take only the parts you read"
      description="Every list is separate, and turning one off never turns another on."
      subscriptions={[
        {
          name: "The weekly letter",
          description: "Tuesday mornings, around 700 words.",
          perMonth: 4,
          defaultOn: true,
        },
        {
          name: "Live sessions",
          description: "One notice a fortnight, plus the recording.",
          perMonth: 2,
        },
      ]}
      countLabel="emails a month, roughly"
      emptyLabel="Nothing selected. We will not email you at all."
      saveLabel="Save preferences"
      savedLabel="Saved"
      note="Unsubscribing from everything removes your address the same day."
    />
  );
}

Props

type Subscription = {
  name: string;
  description: string;
  perMonth: number;
  defaultOn?: boolean;
};

Behavior notes

• The figure is derived, not stored. It sums perMonth across the ticked rows on every render, so the number always matches the boxes above it.
• Initial state comes from defaultOn through a lazy useState initialiser, which means the starting selection is read once rather than on every render.
• With nothing ticked the block does not print a zero. It swaps the whole figure for emptyLabel, so the empty case reads as a sentence instead of a metric.
• Ticking anything after a save clears the saved state, so the button returns to saveLabel and stops claiming the current selection is stored.
• The save button is Button1 with no href, so it renders a real button and its seal icon changes to a check once saved.
• Each row is a label wrapping the checkbox and its text, so the whole row is a hit target rather than the small square alone.
• Saving is local state only. There is no request in this block, so wire onCheckedChange or the button to your own endpoint when you connect it.