Modal

YunUI's controlled modal — a portalled card with title, scrollable body and footer.

YunUI's own controlled modal — a portalled, centered card with a header (title + optional subtitle), a scrollable body, and an optional footer. It locks body scroll, closes on backdrop click or the Escape key, animates open and closed, and is SSR-safe. Unlike the Radix Dialog, you own the open state via isOpen + onClose.

Import

tsx

1import { Modal } from "@yuhuanowo/yunui";

Basic

A Modal is fully controlled: keep its isOpen in state and pass onClose to flip it back. The example below wires a trigger button to local state.

Controlled modal

tsx

1"use client";
2 
3import { useState } from "react";
4import { Modal, Button } from "@yuhuanowo/yunui";
5 
6export function ModalDemo() {
7  const [open, setOpen] = useState(false);
8  return (
9    <>
10      <Button onClick={() => setOpen(true)}>Open modal</Button>
11      <Modal
12        isOpen={open}
13        onClose={() => setOpen(false)}
14        title="Invite your team"
15        subtitle="They'll get an email with a join link."
16        size="md"
17        footer={
18          <div className="flex justify-end gap-3">
19            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
20            <Button onClick={() => setOpen(false)}>Send invites</Button>
21          </div>
22        }
23      >
24        <p className="text-sm text-muted-foreground">
25          Enter the email addresses of the people you want to invite.
26        </p>
27      </Modal>
28    </>
29  );
30}

Props

Prop	Type	Default	Description
children*	ReactNode	—	Modal content
className	string	—	Additional CSS classes
footer	ReactNode	—	Optional footer content
isClosing	boolean	—	Whether modal is in closing animation state
isOpen*	boolean	—	Whether the modal is open
maxHeight	string	85vh	Custom max-height override
onBackdropClick	(() => void)	—	Called when backdrop is clicked (defaults to onClose)
onClose*	() => void	—	Callback when modal should close
setIsClosing	((closing: boolean) => void)	—	Callback to set closing state
showCloseButton	boolean	true	Whether to show the close button
showUnsavedBadge	boolean	false	Whether to show unsaved changes badge
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "full"	lg	Modal size
subtitle	string	—	Optional subtitle displayed below title
title*	string	—	Modal title (required for accessibility)

Import

Basic

Props

On this page