Dialog
Controlled modal with focus management and scroll lock.
Source
"use client"
import { useState } from "react"
import { Button } from "@/registry/warren/button/button"
import { Dialog } from "@/registry/warren/dialog/dialog"
export default function DialogDemo() {
const [open, setOpen] = useState(false)
return (
<div className="flex flex-wrap items-center justify-center gap-4 py-12">
<Button variant="danger" onClick={() => setOpen(true)}>
ABORT RUN
</Button>
<Dialog
open={open}
onOpenChange={setOpen}
title="ABORT RUN"
description="ABORT ALL ACTIVE ROUTES AND DROP THE WALL?"
footer={
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setOpen(false)}>
CANCEL
</Button>
<Button variant="danger" onClick={() => setOpen(false)}>
ABORT
</Button>
</div>
}
>
<p className="font-mono text-[10px] uppercase leading-relaxed tracking-wide text-muted-foreground">
ACTIVE RUNS 12 · REJECTED 2 · THE RUN WALL WILL BE CLEARED ON CONFIRM
</p>
</Dialog>
</div>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/dialog.jsonUsage
import { Dialog } from "@/components/ui/dialog"<Dialog
open={open}
onOpenChange={setOpen}
title="ABORT RUN"
description="ABORT ALL ACTIVE ROUTES AND DROP THE WALL?"
>
<p>ACTIVE RUNS 12 · REJECTED 2</p>
</Dialog>Dialog is controlled — the caller owns open and passes onOpenChange (called with false on
Escape, an overlay click, or the close button). It renders a flat dim overlay plus a centered
2px-ink panel. While open the body scroll locks and focus moves to the panel, where Tab and
Shift+Tab cycle within the modal's focusable controls; on close focus returns to the previously
focused element.
Structure
Header (title + close button) · body · optional footer strip under a 1px hairline. The panel is
role="dialog" with aria-modal="true", aria-labelledby wired from the title, and
aria-describedby when a description is present.
API Reference
Prop
Type