Dialog

Public Dialog export.

Calling it as a component (<Dialog open onClose ...>) renders the Tungsten

sugar wrapper (the DialogRoot defined above).

Reading static properties (Dialog.Trigger, Dialog.Content, etc.) reaches

straight through to the underlying Radix primitives for consumers who need

the full compound API.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Dialog } from '@hey-mike/tungsten';

import { Dialog } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/dialog/page.tsx

'use client';

import { Dialog } from '@hey-mike/tungsten';

export default function DialogSnapshot() {
  return (
    <main
      data-testid="snapshot-root"
      className="bg-page text-ink-1 min-h-screen p-8"
    >
      <h1 className="text-ink-2 mb-6 font-mono text-sm uppercase tracking-widest">
        Dialog
      </h1>
      <Dialog
        open
        onClose={() => undefined}
        title="Dialog title"
        description="Dialog body content goes here."
      >
        <p className="text-ink-2">Additional dialog content for context.</p>
      </Dialog>
    </main>
  );
}

'use client';

import { Dialog } from '@hey-mike/tungsten';

export default function DialogSnapshot() {
  return (
    <main
      data-testid="snapshot-root"
      className="bg-page text-ink-1 min-h-screen p-8"
    >
      <h1 className="text-ink-2 mb-6 font-mono text-sm uppercase tracking-widest">
        Dialog
      </h1>
      <Dialog
        open
        onClose={() => undefined}
        title="Dialog title"
        description="Dialog body content goes here."
      >
        <p className="text-ink-2">Additional dialog content for context.</p>
      </Dialog>
    </main>
  );
}

Props

Surface specific to <Dialog />.

Prop	Type	Default	Description
open*	`boolean`	—	—
onClose*	`() => void`	—	—
title	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	—
description	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	—
className	`string`	—	Optional class on the dialog content surface (the flat panel). Note: overriding `p-*` removes the `pr-14` clearance reserved for the close button.
aria-labelledby	`string`	—	Standard ARIA — when the consumer labels the dialog via an existing heading inside `children` (e.g. `aria-labelledby="my-heading"` with a matching `<h2 id="my-heading">`), Dialog auto-detects the heading and renders a visually-hidden `<DialogTitle>` so Radix's accessibility contract is satisfied without forcing consumers to duplicate the heading via the `title` prop. When `title` is also provided, `title` wins; `aria-labelledby` is ignored.

Sub-components

Composition slots re-exported from the same module.

nestedModalZ

No library-specific props. Pass through standard HTML attributes for the underlying element.

ModalDepthProvider