Dialog

A window overlaid on the primary window, rendering the content underneath inert.

Installation

Import from the package. Do not run shadcn add in your app.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@carsxe/design-system/components/dialog"

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@carsxe/design-system/components/dialog"
import { Button } from "@carsxe/design-system/components/button"

<Dialog>
  <DialogTrigger render={<Button variant="outline" />} nativeButton={false}>
    Open
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

API Reference

Native element props are forwarded. There are no extra variant props.