WinDialog

A draggable, fixed-position floating window with title bar, close button, and drop shadow.

When to use

Use WinDialog for modal dialogs, confirmation prompts, and floating windows.

When not to use

Do not use WinDialog for non-modal content. Use WinBox instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinDialog } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default dialog

Confirmation dialog

Error dialog

Props

All available props for the WinDialog component.

Prop	Type	Default	Description
`title`	`string`	`—`	Dialog title in the title bar.
`open`	`boolean`	`—`	Whether the dialog is visible.
`onClose`	`() => void`	`—`	Close handler.
`children`	`ReactNode`	`—`	Dialog body content.
`width`	`string`	`'280px'`	Dialog width.
`defaultPosition`	`{ x: number; y: number }`	`—`	Initial position (centers if omitted).

Usage

Example showing the component in a typical context:

import { useState } from 'react'
import { WinDialog } from 'win2k-ui'
import { WinButton } from 'win2k-ui'

export function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <WinButton onClick={() => setOpen(true)}>Open Dialog</WinButton>
      <WinDialog title="Confirm" open={open} onClose={() => setOpen(false)}>
        <p>Are you sure?</p>
        <div className="flex justify-end gap-2 mt-2">
          <WinButton onClick={() => setOpen(false)}>OK</WinButton>
          <WinButton onClick={() => setOpen(false)}>Cancel</WinButton>
        </div>
      </WinDialog>
    </>
  )
}

Notes

WinDialog uses `"use client"` for drag functionality. It renders as a fixed-position overlay with a unique drop shadow — the only component that uses `box-shadow`. Drag is initiated from the title bar. The dialog auto-centers on open unless `defaultPosition` is provided.