Modal

Modal overlay component

Marketing BlockFeedback

Overview

A simplified wrapper around the Dialog UI component with a flat prop API. Suitable for confirmation dialogs, sign-up gates, and announcement modals in marketing contexts.

Usage

import { Modal } from '@leanicon/web-builder-library'

const [open, setOpen] = React.useState(false)

;<Modal
  open={open}
  onOpenChange={setOpen}
  title="Join our newsletter"
  description="Get the latest updates delivered to your inbox."
>
  <NewsletterSignup />
</Modal>

Default

Click the button to open the modal.

With description

Add description for a subtitle below the title.

Confirmation dialog

Modal with action buttons for confirm/cancel patterns.

With form

Modal containing a form with input fields.

Modal as a newsletter subscription gate.

Dark mode

Confirmation — dark mode

With form — dark mode

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state (required)
`onOpenChange`	`(open: boolean) => void`	—	Callback on open/close (required)
`title`	`string`	—	Dialog title (required)
`description`	`string?`	—	Optional subtitle below the title
`children`	`React.ReactNode`	—	Modal body content (required)
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on DialogContent

Notes

The modal is fully controlled via open / onOpenChange.
Built on Radix UI Dialog — supports keyboard navigation (Escape to close) and focus trapping.
For a trigger button, use the ModalDemo wrapper or manage state yourself.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required
`open`	`boolean`	—	Yes
`onOpenChange`	`(open: boolean) => void`	—	Yes
`title`	`string`	—	Yes
`description`	`string`	—	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No

Overview

Usage

Default

With description

Confirmation dialog

With form

Newsletter signup

Dark mode

Confirmation — dark mode

With form — dark mode

Props

Notes

Props