# Awesome Dialog
URL: /docs/web/components/awesome-dialog

Awesome Dialog component.

**Demo:**

```tsx
'use client';
// @custom-demo

import {
  type ReactNode,
  useCallback,
  useState
} from 'react';

import {
  type ToolbarMenuItem,
  AwesomeDialog,
  AwesomeDialogBody,
  AwesomeDialogFooter,
  AwesomeDialogHeader,
  AwesomeDialogToolbar,
  GlobalDialogBar,
  GlobalDialogProvider
} from '@docyrus/ui/components/awesome-dialog';
import { type EnumOption } from '@docyrus/ui/components/form-fields';
import {
  EditableRecordDetail,
  EditableRecordDetailField,
  type FieldChange,
  type RecordDetailField
} from '@docyrus/ui/components/editable-record-detail';

import { Button } from '@docyrus/ui/primitives/ui/button';
import { Badge } from '@docyrus/ui/primitives/ui/badge';
import { Input } from '@docyrus/ui/primitives/ui/input';
import { Label } from '@docyrus/ui/primitives/ui/label';
import { Textarea } from '@docyrus/ui/primitives/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';

type ContainerType = 'modal' | 'sheet' | 'drawer';
type SideType = 'left' | 'right' | 'top' | 'bottom';
type SizeType = 'sm' | 'default' | 'lg' | 'xl' | 'full';
type PatternType = 'stripes' | 'dots' | 'grid' | 'crosshatch' | 'zigzag';

const toolbarMenus: ToolbarMenuItem[] = [
  {
    label: 'File',
    items: [
      { label: 'New', shortcut: '⌘N', onClick: () => {} },
      { label: 'Open', shortcut: '⌘O', onClick: () => {} },
      { label: 'Save', shortcut: '⌘S', onClick: () => {} },
      { separator: true, label: '' },
      { label: 'Export as PDF', onClick: () => {} },
      { label: 'Print', shortcut: '⌘P', onClick: () => {} }
    ]
  },
  {
    label: 'Edit',
    items: [
      { label: 'Undo', shortcut: '⌘Z', onClick: () => {} },
      { label: 'Redo', shortcut: '⇧⌘Z', onClick: () => {} },
      { separator: true, label: '' },
      { label: 'Cut', shortcut: '⌘X', onClick: () => {} },
      { label: 'Copy', shortcut: '⌘C', onClick: () => {} },
      { label: 'Paste', shortcut: '⌘V', onClick: () => {} }
    ]
  },
  {
    label: 'View',
    items: [
      { label: 'Zoom In', shortcut: '⌘+', onClick: () => {} },
      { label: 'Zoom Out', shortcut: '⌘-', onClick: () => {} },
      { separator: true, label: '' },
      { label: 'Toggle Sidebar', shortcut: '⌘B', onClick: () => {} },
      { label: 'Full Screen', shortcut: '⌘⇧F', onClick: () => {} }
    ]
  }
];

const RECORD_PRIORITY_OPTIONS: Array
          
        </div>
        <div className="space-y-2">
          
          
        </div>
      </div>
      <div className="space-y-2">
        
        
          
            
            
            
          
        
      </div>
      <div className="space-y-2">
        
        
          
            
            
            
            
          
        
      </div>
      <div className="space-y-2">
        
        
      </div>
      <div className="flex items-center gap-2">
        
        
      </div>
    </div>
  );
}

function SectionHeader({ children }: { children: ReactNode }) {
  return (
    <div className="col-span-full">
      <h3 className="text-base font-semibold tracking-tight">{children}</h3>
      <div className="mt-1 h-px bg-border" />
    </div>
  );
}

function DialogButton({
  label,
  container,
  side,
  size,
  patternStyle,
  pattern = true,
  fullscreenable = false,
  withToolbar = false,
  withFooter = true,
  headerProps
}: {
  label: string;
  container?: ContainerType;
  side?: SideType;
  size?: SizeType;
  patternStyle?: PatternType;
  pattern?: boolean;
  fullscreenable?: boolean;
  withToolbar?: boolean;
  withFooter?: boolean;
  headerProps?: {
    title?: string;
    description?: string;
    icon?: string;
    avatar?: { name?: string; color?: string };
    headerButtons?: ReactNode;
  };
}) {
  const [open, setOpen] = useState(false);

  return (
    <>
      
      
        {withFooter && (
          
            
          
        )}
      
    </>
  );
}

function WithFormDialogButton({
  label,
  container,
  side,
  size,
  patternStyle,
  headerProps
}: {
  label: string;
  container?: ContainerType;
  side?: SideType;
  size?: SizeType;
  patternStyle?: PatternType;
  headerProps?: {
    title?: string;
    description?: string;
    icon?: string;
  };
}) {
  const [open, setOpen] = useState(false);

  return (
    <>
      
      
        
          
        
      
    </>
  );
}

function EditableRecordDetailDrawerButton() {
  const [open, setOpen] = useState(false);
  const [record, setRecord] = useState(INITIAL_RECORD);

  const handleSave = useCallback(
    (_: Array
      } />
        
        
      
    </>
  );
}

export function AwesomeDialogDemo() {
  const [globalSettingsOpen, setGlobalSettingsOpen] = useState(false);
  const [globalHelpOpen, setGlobalHelpOpen] = useState(false);

  return (
    <div className="grid w-full gap-6">

      {/* --- Container Types --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
        
        
        
        
        
      </div>

      {/* --- Sizes --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
        
        
        
      </div>

      {/* --- Pattern Styles --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
        
        
        
        
      </div>

      {/* --- Header, Footer, & Toolbar --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
        
                
              </div>
            )
          }} />
        
        
        
          }} />
      </div>

      {/* --- With Form --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
        
      </div>

      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
      </div>

      {/* --- Fullscreen --- */}
      
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        
        
      </div>

      {/* --- Global Dialog Provider (Minimizable) --- */}
      
      
          
        </div>

        
          
            
          
        

        
        

        
      

    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-awesome-dialog
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [radix-ui](https://www.npmjs.com/package/radix-ui)
- [@types/react](https://www.npmjs.com/package/@types/react)
- [@types/react-dom](https://www.npmjs.com/package/@types/react-dom)
- [vaul](https://www.npmjs.com/package/vaul)

## Usage

```tsx
import {
  AwesomeDialog
} from "@docyrus/ui/components/awesome-dialog";
import type {
  AwesomeDialogProps,
  AwesomeDialogHeaderProps,
  AwesomeDialogBodyProps,
  AwesomeDialogFooterProps,
  AwesomeDialogToolbarProps,
  DialogContainer,
  DialogSide,
  DialogSize,
  DialogState,
  GlobalDialogContextValue,
  GlobalDialogProviderProps,
  ToolbarMenuItem,
  ToolbarMenuAction
} from "@docyrus/ui/components/awesome-dialog";

```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `AwesomeDialog` | Public export |
| `AwesomeDialogBody` | Internal — `awesome-dialog-body.tsx` |
| `AwesomeDialogContent` | Internal — `awesome-dialog-content.tsx` |
| `AwesomeDialogFooter` | Internal — `awesome-dialog-footer.tsx` |
| `AwesomeDialogHeader` | Internal — `awesome-dialog-header.tsx` |
| `AwesomeDialogToolbar` | Internal — `awesome-dialog-toolbar.tsx` |
| `GlobalDialogBar` | Internal — `global-dialog-bar.tsx` |
| `DrawerContainer` | Internal — `containers/drawer-container.tsx` |
| `ModalContainer` | Internal — `containers/modal-container.tsx` |
| `SheetContainer` | Internal — `containers/sheet-container.tsx` |
| `AwesomeDialogProvider` | Internal — `contexts/dialog-context.tsx` |
| `GlobalDialogProvider` | Internal — `contexts/global-dialog-context.tsx` |

## Type Exports

| Type | Description |
|------|-------------|
| `AwesomeDialogProps` | — |
| `AwesomeDialogHeaderProps` | — |
| `AwesomeDialogBodyProps` | — |
| `AwesomeDialogFooterProps` | — |
| `AwesomeDialogToolbarProps` | — |
| `DialogContainer` | — |
| `DialogSide` | — |
| `DialogSize` | — |
| `DialogState` | — |
| `GlobalDialogContextValue` | — |
| `GlobalDialogProviderProps` | — |
| `ToolbarMenuItem` | — |
| `ToolbarMenuAction` | — |

## Type Reference

### AwesomeDialogProps

| Field | Type | Description |
|-------|------|-------------|
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `children` | `ReactNode` | — |
| `container` | `DialogContainer` | — |
| `side` | `DialogSide` | — |
| `size` | `DialogSize` | — |
| `pattern` | `boolean` | — |
| `patternStyle` | `PatternStyle` | — |
| `resizable` | `boolean` | — |
| `fullscreenable` | `boolean` | — |
| `defaultFullscreen` | `boolean` | — |
| `minimizable` | `boolean` | — |
| `preventOutsideClose` | `boolean` | — |
| `dialogId` | `string` | — |
| `className` | `string` | — |

### AwesomeDialogHeaderProps

| Field | Type | Description |
|-------|------|-------------|
| `children` | `ReactNode` | — |
| `className` | `string` | — |
| `title` | `string` | — |
| `description` | `string` | — |
| `icon` | `string` | — |
| `iconLib` | `string` | — |
| `name` | `string` | — |
| `color` | `string` | — |
| `icon` | `string` | — |
| `image` | `string` | — |
| `closable` | `boolean` | — |
| `headerButtons` | `ReactNode` | — |
| `onClose` | `() => void` | — |

### AwesomeDialogBodyProps

| Field | Type | Description |
|-------|------|-------------|
| `children` | `ReactNode` | — |
| `className` | `string` | — |

### AwesomeDialogFooterProps

| Field | Type | Description |
|-------|------|-------------|
| `children` | `ReactNode` | — |
| `className` | `string` | — |

### AwesomeDialogToolbarProps

| Field | Type | Description |
|-------|------|-------------|
| `menus` | `ToolbarMenuItem[]` | — |
| `children` | `ReactNode` | — |
| `className` | `string` | — |

### DialogContainer

`"modal"` | `"sheet"` | `"drawer"`

### DialogSide

`"left"` | `"right"` | `"top"` | `"bottom"`

### DialogSize

`"sm"` | `"default"` | `"lg"` | `"xl"` | `"full"`

### DialogState

| Field | Type | Description |
|-------|------|-------------|
| `dialogId` | `string` | — |
| `minimized` | `boolean` | — |
| `fullscreen` | `boolean` | — |
| `zIndex` | `number` | — |
| `title` | `string` | — |
| `icon` | `string` | — |

### GlobalDialogContextValue

| Field | Type | Description |
|-------|------|-------------|
| `dialogs` | `Map<string, DialogState>` | — |
| `register` | `(id: string, meta: { title?: string; icon?: string }) => void` | — |
| `unregister` | `(id: string) => void` | — |
| `minimize` | `(id: string) => void` | — |
| `restore` | `(id: string) => void` | — |
| `bringToFront` | `(id: string) => void` | — |
| `toggleFullscreen` | `(id: string) => void` | — |
| `getZIndex` | `(id: string) => number` | — |
| `isMinimized` | `(id: string) => boolean` | — |
| `isFullscreen` | `(id: string) => boolean` | — |
| `minimizedDialogs` | `DialogState[]` | — |

### GlobalDialogProviderProps

| Field | Type | Description |
|-------|------|-------------|
| `children` | `ReactNode` | — |
| `persist` | `boolean` | — |
| `storageKey` | `string` | — |

### ToolbarMenuItem

| Field | Type | Description |
|-------|------|-------------|
| `label` | `string` | — |
| `items` | `ToolbarMenuAction[]` | — |

### ToolbarMenuAction

| Field | Type | Description |
|-------|------|-------------|
| `label` | `string` | — |
| `shortcut` | `string` | — |
| `disabled` | `boolean` | — |
| `separator` | `boolean` | — |
| `onClick` | `() => void` | — |