Components

Dialog

Focused interactions with accessible overlays.

A focused conversation

The dialog traps focus, closes with Escape, and returns focus to its trigger. This demo only changes local preview state.

Open the dialog to try keyboard navigation.

View code

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@repo/ui/components/ui/dialog"
import { Button } from "@repo/ui/components/ui/button"

<Dialog>
  <DialogTrigger asChild><Button>Open dialog</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Your workspace</DialogTitle>
      <DialogDescription>A focused space for your ideas.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild><Button>Done</Button></DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Back to overview