An alert dialog with a draining countdown ring that turns red in the last ten seconds and signs the user out at zero. Clicking the backdrop nudges the dialog instead of dismissing it.
We will sign you out of Ledgerline in 0:45 unless you stay.
npx shadcn@latest add https://hyperblur.dev/r/dialog-session-alert.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dialog-session-alert.tsx.
import { DialogSessionAlert } from "@/components/hyperblur/dialog-session-alert"
<DialogSessionAlert open={idle} onExtend={refreshToken} onTimeout={signOut} trigger={null} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Preview timeout warning" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| seconds | number | 60 | Length of the countdown each time the alert opens. |
| app | string | "Ledgerline" | Product name used in the copy. |
| note | string | "Your draft “Q3 board memo” is saved." | Reassurance row under the message. Empty string hides it. |
| onExtend | () => void | undefined | Called when the user stays signed in (button or Escape). |
| onSignOut | () => void | undefined | Called when the user signs out early. |
| onTimeout | () => void | undefined | Called when the countdown reaches zero. |
| onSignIn | () => void | undefined | Called from the signed out state when the user signs in again. |
| accent | string | "#f5a524" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |