Confirm Switch

Component 1

About

A toggle switch that flips immediately but gives the user a brief undo window before the change is actually confirmed and committed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Confirm Switch to your project and fits it to your theme.

Code

How Confirm Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { ConfirmSwitch } from "@/components/ui/confirm-switch";

export default function ConfirmSwitchDemo() {
  const [isPublic, setIsPublic] = React.useState(false);

  return (
    <div className="flex items-center gap-3">
      <ConfirmSwitch
        checked={isPublic}
        onConfirm={(checked) => setIsPublic(checked)}
      />
      <span className="text-sm text-muted-foreground">
        {isPublic ? "Public" : "Private"}
      </span>
    </div>
  );
}