Oihana Next UI - 0.9.0

Application logo

Modal Component

Modal Examples with useModal Hook

Simple Modal

Hello!

Press ESC key or click the button below to close

Localized labels

None of the three modals below is given an agree, a disagree or a closeTitle prop. Every label — the two buttons and the accessible name of the header close button — is read from the components.modal bundle. Switch the language of the lab and reopen them : the labels follow.

Modal

Base labels : components.modal.agree and components.modal.disagree.

ConfirmModal

The agree button reads components.modal.confirm.agree, the disagree button falls back to the base components.modal.disagree.

AlertModal

Single button, reading components.modal.alert.agree.

Popover mode — light, non-blocking (usePopover)

Opt-in usePopover: the modal renders through the browser's native Popover API instead of <dialog>. It can be opened declaratively (a button with popovertarget, no JS) or via useModal. Escape and a backdrop click close it. It does not block the page — use it for light panels, not for blocking confirmations.

Responsive Fullscreen (Breakpoint)

Mobile Fullscreen

Ce modal est :

  • Fullscreen sur mobile (< 768px)
  • Normal sur desktop (≥ 768px)

Redimensionnez votre fenêtre pour voir l'effet !

Tablet + Mobile Fullscreen

Ce modal est :

  • Fullscreen sur tablet et mobile (< 1024px)
  • Normal sur large screens (≥ 1024px)

Almost Always Fullscreen

Ce modal est :

  • Fullscreen jusqu'à xl (< 1280px)
  • Normal seulement sur très larges écrans (≥ 1280px)

Toggle Modal (with State Tracking)

Closed

Toggle Modal

This modal uses the toggle function and isOpen state.

Alert Modals (Single Button)

Success!

Your operation was completed successfully.

Information

Here's some important information:

  • Your session will expire in 10 minutes
  • Please save your work regularly
  • Contact support if you need help

Warning

This action may have unintended consequences.

Error

Payment could not be processed

Please check your payment information and try again.

Error code: CARD_DECLINED

Confirmation Modals (Two Buttons)

Delete Item

Are you sure you want to delete this item?

This action cannot be undone.

Save Changes

You have unsaved changes. Do you want to save them before leaving?

Fullscreen Modal

Fullscreen Modal

This modal takes the full screen

Great for immersive content or forms

Responsive & Placement

Responsive Modal

This modal appears at the bottom on mobile (modal-bottom) and in the middle on desktop (sm:modal-middle).

Top Modal

This modal is positioned at the top of the screen.

Bottom Modal

This modal is positioned at the bottom of the screen.

Custom Width

Wide Modal

This modal has a custom maximum width of 5xl.

Column 1

Wide modals are great for complex content

Column 2

Like multi-column layouts

Column 3

Or detailed forms

Behavior Options

No Backdrop Click

Clicking outside won't close this modal.

Use the button or ESC key to close.

No ESC Key

ESC key won't close this modal.

Use the button or click outside to close.

Close Button in Corner

This modal has a close button (✕) in the top-right corner.

Custom Footer

Modal without Footer

This modal has no footer. Close it with the ✕ button or ESC key.

Custom Footer

This modal has a custom button in the footer alongside the standard buttons.

Custom Footer Node — sticky footer + scrollable content

When to use footerNode

Use the footerNode prop when the standardagree / disagree footer is too rigid — typically for forms with a status text, custom buttons, or any layout that does not fit the default modal-action row.

✅ What it gives you
  • Footer always pinned at the bottom of the modal-box
  • Content area scrolls on its own (smooth, internal)
  • Header stays at the top
  • No need for !important overrides
  • No need for modalBoxClassName="flex flex-col" boilerplate
⚠️ Precedence rules

When footerNode is set, these props are ignored:

agree, disagree, agreeColor, disagreeColor, agreeIcon, disagreeIcon, showAgree, showDisagree, showFooter, footerReverse, footerClassName, footerOptions, onAgree, onCancel

A console.warn is emitted in dev if any of them are passed alongside.

Standard mode (without footerNode) is unchanged: the existingshowFooter behaviour with sticky agree/disagree row still works exactly as before.
Before / After

❌ Before (manual recipe — 8 lines, 5 ! markers)

<Modal
  contentClassName ="!overflow-hidden !p-0 flex flex-col flex-1 min-h-0"
  modalBoxClassName="!overflow-hidden flex flex-col"
  showFooter={false}>
  <div className="flex-1 min-h-0 overflow-y-auto ...">
    {form fields}
  </div>
  <div className="shrink-0 flex border-t bg-base-100 ...">
    {status + cancel + save}
  </div>
</Modal>

✅ After — 1 prop, no overrides

<Modal
  title="Edit profile"
  footerNode={<FormFooter ... />}
>
  <form className="flex flex-col gap-4">
    {form fields}
  </form>
</Modal>
// modal-box auto: flex flex-col
// content auto:   flex-1 min-h-0 overflow-y-auto

Edit User Profile (long form)

Scroll inside this modal — notice that the header stays at the top and the footer stays visible at the bottom while the form scrolls.

Saved 2 seconds ago

Form in Modal

User Registration

useModal Hook Usage

const { modalRef, open, close, toggle, isOpen } = useModal() ;
// With callbacks
const { modalRef, open } = useModal({
  onOpen: () => console.log('Opened'),
  onClose: () => console.log('Closed'),
}) ;
<Button onClick={ open }>Open</Button>
<Modal ref={ modalRef }>Content</Modal>

Stacked Modals (Nesting)

You can open multiple modals on top of each other. The browser handles the stacking order.

Level 1: Configuration

This is the first layer. You might be configuring a complex object here.

Need to add a sub-item?

The backdrop of Level 2 will cover Level 1.

Level 2: Sub-item Details

Safety Check

Before confirming, you can even open a 3rd layer!

Level 3: Confirm Deletion

Are you absolutely sure? This is the third layer of modals.

Toast over Modal

Click to verify that toasts appear above the modal backdrop. Test case: native <dialog> top layer vs ToastProvider popover.

Vertical
Horizontal
CurrentvAlign = bottomhAlign = end

Toast over Modal

Click any of the buttons below. Each toast must appear above the modal backdrop, fully clickable (the close ✕ should work).

Stress test : toast under stacked modals

These buttons fire a toast first, then open a modal a few hundred milliseconds later. Without the MutationObserver in the provider, the modal would steal the top of the top-layer stack and hide the toast. With it, the toast popover is re-promoted as soon as the new <dialog> opens.

Level 1 (opened after toast)

This modal was opened after the toast was already visible. The MutationObserver in the provider should have re-promoted the toast popover to the top of the top-layer stack.

Level 2

Level 2 is open. The toast should still be visible above the backdrop.

Level 3

Level 3 — deepest stack. Toast should still be on top.

Try every combination (3 × 3 = 9 positions): top / middle / bottom × start / center / end. Each toast should anchor at the chosen corner, edge or center — independently of where the modal sits.

CRUD Hooks Demo

useAddModal, useEditModal, useRemoveModal

Total Users
4
Developers
2
Designers
1
NameEmailPhoneRoleActions
AJ
Alice Johnson
alice@example.com555-0101Developer
BS
Bob Smith
bob@example.com555-0102Designer
CB
Charlie Brown
charlie@example.com555-0103Manager
DP
Diana Prince
diana@example.com555-0104Developer

useAddModal State

valid: ✗

useEditModal State

hasChanges: ✗
valid: ✗

useRemoveModal State

ready: ✓

Add New User

Name is required

Email is required

Edit User

Name is required

Email is required

Delete User

Are you sure you want to delete ?

This action cannot be undone.

InputModal - Open on Focus Demo

Click on the input or use the button to open the modal

With openOnFocus

Click the input field or the button to open

Choose a Color

#3b82f6

Select Date

Select Time

Without openOnFocus

Only the button opens the modal

Select Location

Try clicking the input field - nothing happens. You must use the "Choose" button.

When to use openOnFocus?

✅ Good for:

  • Date pickers
  • Time pickers
  • Color pickers
  • Single-click selections
  • Read-only inputs

❌ Avoid for:

  • Complex forms
  • Multi-step selections
  • When typing is needed
  • File uploads
  • Editable inputs
// ✅ Pattern correct avec état temporaire
const [value, setValue] = useState(initial) ;
const [tempValue, setTempValue] = useState(initial) ;
<InputModal
  value={value}  // Affiche finale
  onModalOpen={() => setTempValue(value)}
  onAgree={() => setValue(tempValue)}
>
  <input value={tempValue} onChange={setTempValue} />
</InputModal>

Additional Options

Hide Action Button

Use showActionButton={false} to hide the button

Select Date

Custom onFocus Handler

Combine with your own focus handler

Select Time