caliper uidocs
DemoSign inGet Pro

Account deletion

Pro

Closing an account or workspace without surprises: what goes and who loses access, anything that must happen first, the exact name typed to confirm, and a grace period that can be cancelled.

Installs components/ui/account-deletion.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/account-deletion

Owner of Halden: Maya Chen

Delete this account

Deletion waits 14 days so it can be undone, then it is permanent.

  • Your profile, settings and personal access tokens.
  • Your notes and drafts; shared work stays with the workspace.
  • Access to the Halden and Ostra Freight workspaces.

Before you can delete it

  • You own the Halden workspace. Make someone else its owner first.
Transfer Halden to someone elseThey become the owner straight away and you become an admin.

When to use #

Use it for

  • The danger zone of account or workspace settings.

Skip it when

  • Removing one item from a list; use a confirmation with undo.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/account-deletion

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { AccountDeletion } from "@/components/ui/account-deletion"

The worked example comes with Pro

The 32-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

AccountDeletion

component
PropTypeDefaultDescription
kind"account" | "workspace""workspace"
name *string—What has to be typed to confirm, e.g. the workspace name.
consequences *readonly string[]—What deletion removes, in plain words.
blockersreadonly string[][]Things that must happen first, such as transferring ownership. Deletion is unavailable while any remain.
graceDaysnumber14
scheduledForstring | null—ISO date deletion happens, once scheduled; null or absent otherwise.
onSchedule *(on: string, feedback: { reason?: string | undefined; detail?: string | undefined; }) => void | Promise<void>—
transfer{ title: string; candidates: readonly string[]; onTransfer: (to: string) => void | Promise<void>; }—Offered when someone else must own things first; transferring is done here.
reasonsreadonly string[]["Too expensive", "Missing something I need", "Moving to another product", "No longer needed", "Something else"]Choices for the optional "why" question in the confirmation; [] hides it.
onCancel *() => void | Promise<void>—
nowstringnew Date().toISOString()ISO time treated as now.
classNamestring—

Accessibility #

It exposes alert and note semantics, with aria-labelledby, aria-hidden, aria-label, aria-describedby, aria-live and aria-pressed kept in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix dialog and popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.