# Beste UI
> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.
Markdown rendition of https://ui.beste.co/block/settings67. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-08-12
Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json
---
1. /
2. [Blocks](/blocks)
3. /
4. [Settings](/blocks/settings)
5. /
6. Email Preferences With Live Volume
# Email Preferences With Live Volume[PRO](/pricing)
A subscription preference list where each list carries how often it sends, and the figure underneath recomputes the monthly email volume as boxes are ticked, down to a stated zero.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/settings67`
## 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.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
[Upgrade NowUpgrade Now](/pricing)
### Installation
Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).
**Radix flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r/settings67?email=YOUR_EMAIL&license_key=YOUR_KEY"
```
**Base UI flavor**
bashCopy
```
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.
tsxCopy
```
import { Settings67, settings67Demo } from "@/components/beste/block/settings67";
export default function PreferencesPage() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Settings67 } from "@/components/beste/block/settings67";
export default function PreferencesPage() {
return (
);
}
```
### Props
| Prop | Type | Default | Description |
| ------------- | ---------------- | ------- | ------------------------------------------------------ |
| eyebrow | string | – | Badge6 label above the hairline rule |
| heading | string | – | Section heading under the rule |
| description | string | – | Supporting paragraph |
| subscriptions | Subscription\[\] | \[\] | One tickable row per list, in order |
| countLabel | string | – | Words after the computed figure, e.g. "emails a month" |
| emptyLabel | string | – | Replaces the figure when nothing is selected |
| saveLabel | string | – | Label on the seal button before saving |
| savedLabel | string | – | Label after saving, falls back to "Saved" |
| note | string | – | Fine print under the save row |
| className | string | – | Extra classes for the outer section |
tsCopy
```
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.
## More Settings blocks
[View all Settings](/blocks/settings)
[](/block/settings59)
PRO
settings59
### Subscription Plan Card
Subscription management card displaying current plan details, pricing, included features, renewal date, and status badges with actions to change or cancel. Perfect for SaaS billing dashboards and account settings.
[](/block/settings66)
PRO
settings66
### Workspace Preferences Panel
A settings panel with a section rail on the left and the chosen group on the right, laying out hairline preference rows with switches, a select for the group's default, and a save bar underneath.
[](/block/settings64)
FREE
settings64
### Invoice History Table
Billing history table displaying invoices with date, description, amount, payment status badges, and download buttons. Perfect for account billing pages and payment management dashboards.
[](/block/settings65)
PRO
settings65
### Invoice Detail View
Detailed invoice page with billing address, itemized line items table, subtotal, tax, total, and payment method info with print and download actions. Perfect for generating printable invoices and payment receipts.
## Ship the interface, keep the code.
New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.
[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)
### Library
* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)
### Learn
* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)
### More
* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)
### Shadcn Blocks
* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)
© 2026, [Beste](https://beste.co). All rights reserved.