Modal

A dialog overlay for focused content or actions. Built on Radix UI Dialog for full accessibility and keyboard navigation.

Import

import { Modal } from '@kikumi3n/ui';

Usage

import { Modal, Button } from '@kikumi3n/ui';
import { useState } from 'react';

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Confirm Action"
        description="Are you sure you want to proceed?"
      >
        <p>This action cannot be undone.</p>
        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem' }}>
          <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="danger" onClick={() => setOpen(false)}>Delete</Button>
        </div>
      </Modal>
    </>
  );
}

Sizes

<Modal size="sm" title="Small">...</Modal>
<Modal size="md" title="Medium (default)">...</Modal>
<Modal size="lg" title="Large">...</Modal>

Size	Max Width
sm	400px
md	500px
lg	640px

API

Prop	Type	Default	Description
open	boolean	false	Controlled open state
onOpenChange	(open: boolean) => void	—	Open state change handler
title	string	—	Modal title (rendered in header)
description	string	—	Description text below title
size	'sm' | 'md' | 'lg'	'md'	Modal width
children	ReactNode	—	Modal body content

Accessibility

Built on Radix UI Dialog:

• ✅ Focus trap — focus stays within modal
• ✅ Escape key closes modal
• ✅ Click outside (overlay) closes modal
• ✅ aria-labelledby linked to title
• ✅ aria-describedby linked to description
• ✅ Focus returns to trigger on close
• ✅ Scroll lock on body while open

Related

• Drawer — Slide-out panel (side sheet)
• DropdownMenu — Dropdown menu