Overlays

Dialog and Sheet

A modal dialog on the native <dialog> element: the page behind becomes inert, focus is trapped and returns to the trigger, Escape closes it, and it sits in the top layer above everything. Page scrolling is locked while it is open.

demos/dialog.tsx

import { Button } from "pixelbits/button";
import { Checkbox } from "pixelbits/checkbox";
import { Dialog, DialogClose, Sheet } from "pixelbits/dialog";

export default function Demo() {
  return (
    <div className="flex gap-3">
      <Dialog
        trigger={<Button variant="primary">Publish</Button>}
        title="Publish component?"
        description="It will be added to the public registry on the next release."
        footer={
          <>
            <DialogClose asChild>
              <Button variant="ghost" size="sm">
                Cancel
              </Button>
            </DialogClose>
            <DialogClose asChild>
              <Button variant="primary" size="sm">
                Publish
              </Button>
            </DialogClose>
          </>
        }
      />
      <Sheet
        trigger={<Button>Filters</Button>}
        title="Filters"
        description="Narrow the list."
      >
        <div className="grid gap-2.5">
          <Checkbox label="Buttons" defaultChecked />
          <Checkbox label="Overlays" />
        </div>
      </Sheet>
    </div>
  );
}

Installation

npm: import

import { Dialog, Sheet, DialogClose } from "pixelbits/dialog";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/dialog.json

API

<Dialog>

Example

<Dialog
  trigger={<Button variant="primary">Publish</Button>}
  title="Publish component?"
  description="It will be added to the public registry."
  footer={<><DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose><Button variant="primary" onClick={publish}>Publish</Button></>}
/>

Prop	Type	Default	Description
open	boolean	—	Whether it is open (controlled).
defaultOpen	boolean	false	Open on first render (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when it opens or closes (trigger, close button, Escape, backdrop).
trigger	ReactElement	—	An element that opens it on click, usually a `Button`. It gets `aria-haspopup="dialog"` and the dialog returns focus to it on close.
title	ReactNode	—	Heading, linked with `aria-labelledby`. Strongly recommended.
description	ReactNode	—	Text under the heading, linked with `aria-describedby`.
footer	ReactNode	—	Actions shown at the bottom, usually `Button`s and a `DialogClose`.
dismissible	boolean	true	Close when the backdrop is clicked. Escape always closes.
closeButton	boolean	true	Show the × button in the corner.
children	ReactNode	—	The body.

Also accepts every prop of Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title">.

<Sheet>

A panel that slides in from an edge: filters, navigation, details. Same behavior and props as Dialog (it is a modal <dialog> too).

Example

<Sheet side="end" trigger={<Button>Filters</Button>} title="Filters">…</Sheet>

Prop	Type	Default	Description
side	"start" \| "end" \| "top" \| "bottom"	"end"	The edge it slides in from. `"start"`/`"end"` follow the text direction (left/right in LTR, right/left in RTL).

Also accepts every prop of DialogProps.

<DialogClose>

Closes the surrounding Dialog or Sheet when clicked.

Example

<DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>

Prop	Type	Default	Description
asChild	boolean	false	Render the child element (for example a `Button`) as the close control instead of a plain button.
children*	ReactNode	—	The label or the element to use.
className	string	—	Extra classes, for the button or merged into the child with `asChild`.