# Dialog
Modal surface and related primitives for confirmations and forms.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import {
      Button,
      DialogContent,
      DialogDescription,
      DialogFooter,
      DialogHeader,
      DialogRoot,
      DialogTitle,
      DialogTrigger,
    } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/dialog
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=dialog--default&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="190" title="Dialog component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<DialogRoot>
  <DialogTrigger render={<Button size="sm" />}>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete Layer</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button size="sm" variant="outline">
        Cancel
      </Button>
      <Button size="sm" variant="destructive">
        Delete
      </Button>
    </DialogFooter>
  </DialogContent>
</DialogRoot>
```

## Props

Built on [Base UI Dialog](https://base-ui.com/react/components/dialog). See their docs for prop-level details.