Staaarter

Delete Account

Full-height account-deletion confirmation screen with a warning icon, a bulleted list of consequences, and a text input where typing an exact confirmation word enables the destructive delete button.

By Staaarter Team
Auth
Docs
Live preview

Docs

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.

npx shadcn add https://staaarter.com/r/delete-account.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth41.tsx instead.

Usage

The file also exports auth41Demo, 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 { Auth41, auth41Demo } from "@/components/blocks/auth/auth41";

export default function Page() {
  return <Auth41 {...auth41Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Delete your account"Screen heading.
descriptionstringundefinedShort intro text below the heading.
consequencesstring[]noneBulleted list of consequences shown above the confirmation input.
confirmationWordstring"delete"Word the user must type exactly to enable the destructive button.
cancelHrefstring"#"Href for the 'Cancel' link.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • Real client-side state: the confirmation input is compared to `confirmationWord` with a case-sensitive exact match (`===`); the 'Delete my account' button is disabled until the strings match exactly.
  • `confirmationWord` is a static demo prop, not validated against any real account state, the required word is whatever the caller passes in, not fetched from a backend.
  • 'Delete my account' is inert even when enabled, clicking it does not delete anything, there is no request wired up.