Skip to content
zedkit
@zedtech/zedkit-ui

Dialog

Accessible modal dialogs (trigger, content, title, footer) with focus trap and Escape.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-dialog

Opens a modal with a title, a description and two actions.

View props table
Who is it for?
Developers interrupting the flow for focused input or decisions.
When should I use it?
For short tasks that need full attention (confirm, edit one thing).
When should I pick something else?
For destructive one-click confirms — use ConfirmDialog instead; for long forms use a page.

Use it

Examples import from the package. With copied source, import from @/components/ui/dialog instead.

Order details
import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@zedtech/zedkit-ui";
<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent><DialogTitle>Details</DialogTitle></DialogContent>
</Dialog>

Tall content

import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Text } from "@zedtech/zedkit-ui";
<Dialog>
  <DialogTrigger asChild><Button>Activity</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Order activity</DialogTitle></DialogHeader>
    {["Packed", "Shipped", "Out for delivery"].map((line) => <Text key={line}>{line}</Text>)}
    <DialogFooter><DialogClose asChild><Button>Done</Button></DialogClose></DialogFooter>
  </DialogContent>
</Dialog>

Kit not installed yet?

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    src/app/page.tsxReplace the contents
    import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Dialog>
        <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
        <DialogContent><DialogTitle>Details</DialogTitle></DialogContent>
      </Dialog>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Focus trap and Escape come from Radix; opening moves focus to the panel (no heavy ring, never inside a field, never a text selection) before tabbing to actions. initialFocus (a ref or a selector) opts a field in, with the caret at the end. Header and footer share the content surface (transparent chrome on glass and solid identities). Content centers via the dialog-center utility (--spacing-dialog-center) and elevates with --shadow-overlay. Slots, close offset, and overlay stacking come from --spacing-dialog-* / --z-index-overlay; the close control is a 44px (size-overlay-touch-target) hit area with focus-ring-control, aligned to the title row. Tall content scrolls inside max-h-dialog-max-height, further capped to the visual viewport when the software keyboard is open, with overscroll-behavior: contain. Header copy is left-aligned; footer actions are right-aligned with token gaps; footer clears env(safe-area-inset-bottom).

Troubleshooting

A footer button does not close the dialog unless it is `DialogClose`. Nested overlays need their own `Dialog` root. Tall content scrolls inside the panel (`max-h-dialog-max-height`), not the page behind it.

FieldSet

Fieldsets, field rows, labels, descriptions and error lists.

ConfirmDialog

A one-call destructive confirmation (trigger, title, description, onConfirm).

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting