Modal

An accessible modal dialog with backdrop blur, focus trapping, and smooth animations.

Preview

Open Modal

Installation

Package

import { Modal } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/modal.json

Usage

import { Modal, Button } from '@smc/darwin-ui';
import { useState } from 'react';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>

      <Modal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Modal Title"
      >
        <p>Modal content goes here.</p>
      </Modal>
    </>
  );
}

Features

• Backdrop blur: Glass-morphism overlay effect
• Focus trapping: Keyboard focus stays within modal
• Escape to close: Press ESC to dismiss
• Click outside: Close by clicking backdrop
• Smooth animations: Scale and fade transitions

Sizes

<Modal size="sm" />  // 400px max-width
<Modal size="md" />  // 500px max-width (default)
<Modal size="lg" />  // 600px max-width
<Modal size="xl" />  // 800px max-width

API Reference

Prop	Type	Default	Description
isOpen	boolean	-	Control visibility
onClose	() => void	-	Close handler
title	string	-	Modal title
size	Size	"md"	Modal width
children	ReactNode	-	Modal content

Accessibility

• Focus is trapped inside modal when open
• Escape key closes the modal
• Proper aria-modal and role="dialog" attributes
• Background content hidden from screen readers