Components

Dialog

A modal window overlaid on the page, with focus trapping.

Usage

With @flagon-io/ui installed (see Installation), import it directly.

import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from "@flagon-io/ui";
import { Button, buttonClasses } from "@flagon-io/ui";

<Dialog>
  <DialogTrigger className={buttonClasses({ variant: "outline" })}>Open</DialogTrigger>
  <DialogContent className="p-6">
    <DialogTitle>Delete project</DialogTitle>
    <DialogDescription>This cannot be undone.</DialogDescription>
  </DialogContent>
</Dialog>

Prefer to own the code?

You don’t have to install the package - you can copy this component into your project with the shadcn CLI and edit it freely.

npx shadcn@latest add https://ui.flagon.io/r/dialog.json