Modal - HapplyUI

A modal dialog component with overlay backdrop, optional header with icon, body, and footer sections.

Installation

bunx @happlyui/cli@latest add modal

Dependencies

npm packages

@radix-ui/react-dialog
@radix-ui/react-visually-hidden
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
compact-button

Usage

import * as Modal from "@/components/ui/modal"

<Modal.Root>
  <Modal.Trigger>Open</Modal.Trigger>
  <Modal.Content>
    <Modal.Body>Content</Modal.Body>
    <Modal.Footer>
      <Modal.Close>Cancel</Modal.Close>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

Examples

Demo

Simple modal with body content, icon, and footer actions.

<Modal.Root>
  <Modal.Trigger asChild>
    <Button.Root>Open</Button.Root>
  </Modal.Trigger>
  <Modal.Content>
    <Modal.Body>Payment Received</Modal.Body>
    <Modal.Footer>
      <Modal.Close asChild><Button.Root>Cancel</Button.Root></Modal.Close>
      <Button.Root>View Receipt</Button.Root>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

With Header

Modal with a header section containing icon, title, and description.

<Modal.Content>
  <Modal.Header
    icon={RiChatSettingsLine}
    title="Communication Preferences"
    description="Choose contact preferences."
  />
  <Modal.Body>...</Modal.Body>
  <Modal.Footer>...</Modal.Footer>
</Modal.Content>

API Reference

Modal.Root

Wraps the trigger and content. Passes through Radix Dialog.Root props.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes

Modal.Trigger

The element that opens the modal.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Modal.Content

The modal popup with overlay and close button.

Prop	Type	Default	Description
`showClose`	`boolean`	`true`	Show the close button in the top-right corner
`overlayClassName`	`string`	-	Additional classes for the overlay backdrop
`ariaTitle`	`string`	`'Dialog'`	Visually hidden accessible title for screen readers

Modal.Header

Optional header with icon, title, and description. Renders children directly if provided.

Prop	Type	Default	Description
`icon`	`RemixiconComponentType`	-	Icon component displayed in a circular container
`title`	`string`	-	The header title text
`description`	`string`	-	The header description text

Modal.Body

The main content area with padding.

Prop	Type	Default	Description

Modal.Footer

Footer area with border-top separator for action buttons.

Prop	Type	Default	Description

Modal.Close

Closes the modal when clicked.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Modal.Title

Styled dialog title built on Radix Dialog.Title.

Prop	Type	Default	Description

Modal.Description

Styled dialog description built on Radix Dialog.Description.

Prop	Type	Default	Description

Modal.Portal

Portal container for rendering modal outside the DOM hierarchy. Passes through Radix Dialog.Portal props.

Prop	Type	Default	Description

Modal.Overlay

Backdrop overlay with blur effect and fade animation.

Prop	Type	Default	Description