Billing Auto Recharge

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button 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/billing/billing23.tsx instead.

Usage

The file also exports billing23Demo, 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 { Billing23, billing23Demo } from "@/components/blocks/billing/billing23";

export default function Page() {
  return <Billing23 {...billing23Demo} />;
}

Props

Behavior notes

• The enable toggle, threshold value, and recharge status are all local component state; there are no onChange or onToggle callback props, so lift the state up or read it via a ref if a parent needs to react to changes.
• The threshold slider and its helper text only render while auto-recharge is enabled; turning the toggle off hides that whole section but keeps the chosen threshold in state.
• Recharge now is a demo-only interaction: clicking it sets a loading state for 900ms, then shows a 'rechargeAmount added' confirmation for 2 seconds before resetting to idle. It doesn't call any API, wire an onClick handler of your own via a wrapper if you need a real request.
• If balance is already at or below the current threshold, a small warning line appears under the slider so the mismatch is visible before saving.
• The toggle is a real button with role="switch" and aria-checked, and the slider is a native range input, so both work with keyboard and screen readers without any extra wiring.

Frequently asked questions