Awesome Dialog

Awesome Dialog component.

Client Only

Installation

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

Required Packages(4 packages)

pnpm add radix-ui @types/react @types/react-dom vaul

UI Primitives(2 components)

npx shadcn@latest add button dropdown-menu

Usage

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";

<AwesomeDialog />

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`	—

Awesome Dialog

On this page