Dialog

Installation

npx nuecrea-ui add dialog

Usage

import { Button } from '@/components/ui/button';
import * as Dialog from '@/components/ui/dialog';

export default function DialogStory() {
  return (
    <main>
      <Dialog.Root>
        <Dialog.Trigger render={<Button variant="outline" />}>
          Delete project
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Backdrop />
          <Dialog.Viewport>
            <Dialog.Popup>
              <Dialog.Title>Delete project?</Dialog.Title>
              <Dialog.Description>
                This permanently deletes the project and its files. This cannot be undone.
              </Dialog.Description>
              <div className="flex justify-end gap-2">
                <Dialog.Close render={<Button variant="outline" />}>
                  Cancel
                </Dialog.Close>
                <Dialog.Close render={<Button variant="destructive" />}>
                  Delete
                </Dialog.Close>
              </div>
            </Dialog.Popup>
          </Dialog.Viewport>
        </Dialog.Portal>
      </Dialog.Root>
    </main>
  );
}

API reference