Skip to content

Dialog

A modal built on Base UI Dialog, drawn as an OSRS interface window.

Installation

npx shadcn@latest add https://osrsui.com/r/dialog.json

Usage

import { Dialog, DialogTrigger, DialogContent, DialogDescription, DialogFooter, DialogClose } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger asChild><Button>Drop item</Button></DialogTrigger>
  <DialogContent title="Are you sure?">
    <DialogDescription>…</DialogDescription>
    <DialogFooter>
      <DialogClose asChild><Button>Yes</Button></DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Notes

Pass title for the centred bold header and showCloseButton={false} to hide the close button.

Draggable and resizable

DialogContent accepts the same draggable / resizable props as Window.

<DialogContent title="Are you sure?" draggable resizable>…</DialogContent>