Dialog

Dialog Component

Modal dialog with overlay, accessible focus management, and customizable content.

Import

import { Dialog } from '@covers/ui';

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@covers/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4">
      {/* Form fields */}
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

Name	Type	Description
open	boolean	Controlled open state
onOpenChange	(open: boolean) => void	Callback when open state changes

Default Styling

bg-slate-900 border border-slate-700 rounded-lg shadow-xl

Part of CoverKit

This component is part of CoverKit (@covers/ui), a dark-first React component library.

View on GitHub →View on npm →