Billing Priority Support Toggle
A self-contained add-on card for upselling priority support alongside a subscription. A switch turns the add-on on or off, and if a base plan total is provided, the card recalculates and shows the new combined monthly total immediately. Built for account and billing settings pages where someone can opt into faster response times for a flat recurring fee.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-priority-support-toggle.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing100.tsx instead.
Usage
The file also exports billing100Demo, 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 { Billing100, billing100Demo } from "@/components/blocks/billing/billing100"; export default function Page() { return <Billing100 {...billing100Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Priority support" | Name of the add-on. |
| description | string | none | Optional one-line description under the title. |
| price | string | none | The add-on's recurring price, formatted as a string (for example "$29"). |
| period | string | "/mo" | Billing period suffix appended after the price. |
| features | string[] | [] | Bullet list of what the add-on includes. Omit or pass an empty array to hide the list. |
| baseTotal | string | none | The subscriber's current monthly total, formatted as a string. When set alongside price, the card shows a combined new total. |
| defaultEnabled | boolean | false | Whether the toggle starts on. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- Whether the add-on is enabled is local state; toggling it doesn't call an API, it's on the caller to persist the change (for example via Stripe's subscription items API).
- The toggle is a real button with role=switch and aria-checked, not a styled checkbox, so it announces correctly to screen readers.
- When both price and baseTotal are provided, they're parsed from their formatted strings and the card shows a recalculated "New monthly total" that updates instantly when the toggle flips.
- If baseTotal is omitted, the card just shows the add-on's own price with a plus sign when enabled, without a combined total line.
- price and baseTotal are parsed with a simple non-numeric-character strip, so pass plain currency strings like "$29" or "$99.00" rather than ranges or text.
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.