Billing Invoice Email Settings

Installation

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

Usage

The file also exports billing68Demo, 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 { Billing68, billing68Demo } from "@/components/blocks/billing/billing68";

export default function Page() {
  return <Billing68 {...billing68Demo} />;
}

Props

Types

interface EmailSettingToggle {
  id: string;
  label: string;
  description?: string;
  locked?: boolean;
}

Behavior notes

• Toggle state, the CC email value, and the save status are all local component state; nothing here calls an API on its own.
• A toggle marked locked renders disabled and can't be switched off, for a notification you want to represent as always-on, like a mandatory payment confirmation.
• Changing any toggle or the CC field resets the save button back to its idle label, so a stale 'Saved' state never lingers after a new edit.
• Clicking save runs a 700ms local 'Saving' state, then shows 'Saved' with a checkmark for 2.5 seconds before returning to idle. There's no real persistence, wire the click handler to your own save endpoint.
• Every switch is a real button with role=switch and aria-checked rather than a native checkbox input.

Frequently asked questions