Dialog

Stable

Radix UI modal window overlay that captures focus, prevents background scrolling, and presents high-priority confirmations or interactive cybernetic consoles.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  Dialog, 
  DialogTrigger, 
  DialogContent, 
  DialogHeader, 
  DialogTitle, 
  DialogDescription, 
  DialogFooter, 
  DialogClose 
} from '@siberui/react';

Basic Modal Anatomy & Focus Trapping

The dialog renders a backdrop blur overlay (DialogOverlay) and centers content smoothly with entry transitions.

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">OPEN SETTINGS</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Subsystem Preferences</DialogTitle>
      <DialogDescription>
        Configure distributed node routing and encryption curves.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4 space-y-4">
      <FormField label="Node Identifier">
        <Input defaultValue="SAT_ORBIT_ALPHA_09" />
      </FormField>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">CANCEL</Button>
      </DialogClose>
      <Button variant="neon" glow>SAVE CHANGES</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Visual Variants (Neon, Glass, Destructive, Default)

Configure visual styling on DialogContent via the variant prop: neon, glass, destructive, or default.

tsx

<div className="flex flex-wrap gap-4 items-center justify-center">
  {/* Neon Variant */}
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="neon" glow>NEON CONSOLE</Button>
    </DialogTrigger>
    <DialogContent variant="neon">
      <DialogHeader>
        <DialogTitle className="font-mono text-cyan-400 flex items-center gap-2">
          <Cpu className="h-4 w-4" />
          SYS_CONFIG_OVERRIDE
        </DialogTitle>
        <DialogDescription>
          Execute hardware clock frequency modifications.
        </DialogDescription>
      </DialogHeader>
      <p className="text-xs font-mono text-cyan-500/70 py-3">
        [WARN] Modifying multiplier may elevate core junction temperature.
      </p>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="ghost">ABORT</Button>
        </DialogClose>
        <Button variant="neon" glow>APPLY OVERCLOCK</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>

  {/* Glass Variant */}
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="glass">GLASS DIALOG</Button>
    </DialogTrigger>
    <DialogContent variant="glass">
      <DialogHeader>
        <DialogTitle className="text-white">Translucent Glass Dialog</DialogTitle>
        <DialogDescription>
          Backdrop blurred acrylic surface with subtle perimeter light.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="secondary">CLOSE</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>

  {/* Destructive Variant */}
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="destructive">DESTRUCTIVE DIALOG</Button>
    </DialogTrigger>
    <DialogContent variant="destructive">
      <DialogHeader>
        <DialogTitle className="text-rose-400 flex items-center gap-2">
          <ShieldAlert className="h-4 w-4" />
          PURGE CLUSTER MEMORY?
        </DialogTitle>
        <DialogDescription>
          This action will permanently invalidate all in-flight cryptographic sessions.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="ghost">CANCEL</Button>
        </DialogClose>
        <Button variant="destructive">CONFIRM PURGE</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</div>

Modal Form Interactions

Combine dialogs with FormField and Input for modal editing flows.

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary" leftIcon={<Settings className="h-4 w-4" />}>
      API ACCESS CREDENTIALS
    </Button>
  </DialogTrigger>
  <DialogContent variant="neon">
    <DialogHeader>
      <DialogTitle>Generate Access Token</DialogTitle>
      <DialogDescription>
        Create a scoped token for automated CI/CD pipeline triggers.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4 space-y-4">
      <FormField label="Token Name">
        <Input placeholder="e.g. github-actions-deploy" />
      </FormField>
      <FormField label="Expiration">
        <Input defaultValue="90 days" />
      </FormField>
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">CANCEL</Button>
      </DialogClose>
      <Button variant="neon" glow>GENERATE TOKEN</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Frosted Cyber-Glass Authentication Dialog

Composite cyber glass modal nested on top of circuit textures with continuous perimeter laser sweeps.

BIOMETRIC VAULT ENCLAVE

STANDBY

Hardware key challenge presented: Insert physical security token into USB port 0x01.

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Terminal className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">BIOMETRIC VAULT ENCLAVE</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>

    <p className="text-xs text-slate-300 leading-relaxed font-mono">
      Hardware key challenge presented: Insert physical security token into USB port 0x01.
    </p>

    <div className="pt-2 flex justify-end gap-3">
      <Button variant="ghost" size="sm">ABORT</Button>
      <Button variant="neon" size="sm" glow>AUTHENTICATE KEY</Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Node Termination Protocol

Composite mission defense card with embedded dialog triggers.

NODE LIFECYCLE MANAGEMENT

MANAGED

Safely drain, cordon, or decommission physical blade servers.

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">NODE LIFECYCLE MANAGEMENT</CardTitle>
      <Badge variant="neon" size="sm">MANAGED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Safely drain, cordon, or decommission physical blade servers.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6">
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive" leftIcon={<Trash2 className="h-4 w-4" />} className="w-full">
          INITIATE NODE DECOMMISSION
        </Button>
      </DialogTrigger>
      <DialogContent variant="destructive">
        <DialogHeader>
          <DialogTitle className="text-rose-400 font-mono">CONFIRM NODE REMOVAL</DialogTitle>
          <DialogDescription>
            Are you sure you want to drain traffic and purge BLADE_SERVER_04 from cluster FRA-01?
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">CANCEL</Button>
          </DialogClose>
          <Button variant="destructive">CONFIRM TERMINATION</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
variant	For DialogContent: Visual theme style.	"default" \| "neon" \| "glass" \| "destructive"	"default"
open	Controlled open state for the dialog.	boolean	-
onOpenChange	Callback fired when open state changes.	(open: boolean) => void	-

Accessibility

W3C WAI-ARIA Modal: Conforms strictly to Radix UI Dialog primitive with automated focus trapping and restoration upon closing.
Escape Key: Pressing the Escape key immediately closes the dialog.

Best Practices

Descriptions: Always provide a DialogDescription for screen reader context when opening modal windows.