Danger zone

Workspace settings danger zone: a type-to-confirm delete whose letters light up as you type, a countdown confirm dialog and a 5-second Undo pill, with ownership transfer tucked behind a link.

TypeScript Source with Startup & Business plans Light & dark

Danger zone

Delete this workspace

Removes the workspace, its projects and every member. There is no going back.

Type "acme-inc" to confirm

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { DangerZone } from '@/components/component-kit/items/block-danger-zone';
2
3export function Example() {
4  return <DangerZone workspaceName="acme-inc" onDelete={() => console.log('deleted')} />;
5}

Props

Danger zone properties
Prop	Type	Default	Description
`workspaceName`	`string`	`"acme-inc"`	Name the user must type to arm the Delete button.
`members`	`WorkspaceMember[]`	`3 demo members`	Members offered in the transfer-ownership select ({ id, name, email, initials }).
`countdownSeconds`	`number`	`3`	Seconds the dialog's confirm button stays locked while it counts down.
`undoSeconds`	`number`	`5`	Seconds the Undo pill stays available after deleting.
`onTransfer`	`(memberId: string) => void`	`undefined`	Called once the transfer completes.
`onDelete`	`() => void`	`undefined`	Called when the deletion is confirmed in the dialog.
`onUndo`	`() => void`	`undefined`	Called when Undo is pressed within the grace period.
`compact`	`boolean`	`false`	Render only the delete row, for the index card.
`autoPlay`	`boolean`	`false`	In compact mode, type the workspace name on a loop for inert previews.
`contentClassName`	`string`	`undefined`	Class for the portalled select and confirm dialog.

1import { DangerZone } from '@/components/component-kit/items/block-danger-zone'; 2 3export function Example() { 4 return <DangerZone workspaceName="acme-inc" onDelete={() => console.log('deleted')} />; 5}

Props

Danger zone properties
Prop	Type	Default	Description
`workspaceName`	`string`	`"acme-inc"`	Name the user must type to arm the Delete button.
`members`	`WorkspaceMember[]`	`3 demo members`	Members offered in the transfer-ownership select ({ id, name, email, initials }).
`countdownSeconds`	`number`	`3`	Seconds the dialog's confirm button stays locked while it counts down.
`undoSeconds`	`number`	`5`	Seconds the Undo pill stays available after deleting.
`onTransfer`	`(memberId: string) => void`	`undefined`	Called once the transfer completes.
`onDelete`	`() => void`	`undefined`	Called when the deletion is confirmed in the dialog.
`onUndo`	`() => void`	`undefined`	Called when Undo is pressed within the grace period.
`compact`	`boolean`	`false`	Render only the delete row, for the index card.
`autoPlay`	`boolean`	`false`	In compact mode, type the workspace name on a loop for inert previews.
`contentClassName`	`string`	`undefined`	Class for the portalled select and confirm dialog.

Props

Danger zone properties
Prop	Type	Default	Description
`workspaceName`	`string`	`"acme-inc"`	Name the user must type to arm the Delete button.
`members`	`WorkspaceMember[]`	`3 demo members`	Members offered in the transfer-ownership select ({ id, name, email, initials }).
`countdownSeconds`	`number`	`3`	Seconds the dialog's confirm button stays locked while it counts down.
`undoSeconds`	`number`	`5`	Seconds the Undo pill stays available after deleting.
`onTransfer`	`(memberId: string) => void`	`undefined`	Called once the transfer completes.
`onDelete`	`() => void`	`undefined`	Called when the deletion is confirmed in the dialog.
`onUndo`	`() => void`	`undefined`	Called when Undo is pressed within the grace period.
`compact`	`boolean`	`false`	Render only the delete row, for the index card.
`autoPlay`	`boolean`	`false`	In compact mode, type the workspace name on a loop for inert previews.
`contentClassName`	`string`	`undefined`	Class for the portalled select and confirm dialog.

Danger zone

Workspace settings danger zone: a type-to-confirm delete whose letters light up as you type, a countdown confirm dialog and a 5-second Undo pill, with ownership transfer tucked behind a link.

TypeScript Source with Startup & Business plans Light & dark

Danger zone

Delete this workspace

Removes the workspace, its projects and every member. There is no going back.

Type "acme-inc" to confirm

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { DangerZone } from '@/components/component-kit/items/block-danger-zone';
2
3export function Example() {
4  return <DangerZone workspaceName="acme-inc" onDelete={() => console.log('deleted')} />;
5}

Props

Danger zone properties
Prop	Type	Default	Description
`workspaceName`	`string`	`"acme-inc"`	Name the user must type to arm the Delete button.
`members`	`WorkspaceMember[]`	`3 demo members`	Members offered in the transfer-ownership select ({ id, name, email, initials }).
`countdownSeconds`	`number`	`3`	Seconds the dialog's confirm button stays locked while it counts down.
`undoSeconds`	`number`	`5`	Seconds the Undo pill stays available after deleting.
`onTransfer`	`(memberId: string) => void`	`undefined`	Called once the transfer completes.
`onDelete`	`() => void`	`undefined`	Called when the deletion is confirmed in the dialog.
`onUndo`	`() => void`	`undefined`	Called when Undo is pressed within the grace period.
`compact`	`boolean`	`false`	Render only the delete row, for the index card.
`autoPlay`	`boolean`	`false`	In compact mode, type the workspace name on a loop for inert previews.
`contentClassName`	`string`	`undefined`	Class for the portalled select and confirm dialog.