Dialog Component - Rohit UI

Import

import { Dialog } from 'rohit-ui';

Examples

Basic Dialog

Dialog Title

This is a basic dialog box.

// Basic dialog
<Dialog
  title="Confirmation"
  open={isOpen}
  onClose={() => setIsOpen(false)}
>
  <p>Are you sure you want to proceed?</p>
  <div className="dialog-buttons">
    <button onClick={() => setIsOpen(false)}>Cancel</button>
    <button onClick={() => {
      console.log("Confirmed!");
      setIsOpen(false);
    }}>Confirm</button>
  </div>
</Dialog>

Dialog with Form

Save File

File name:

Save as type:

// Dialog with custom width
<Dialog
  title="Wide Dialog"
  open={isOpen}
  onClose={() => setIsOpen(false)}
  width="600px"
>
  <p>This is a wider dialog</p>
</Dialog>

Rohit Mode Dialog

UNNECESSARILY COMPLICATED

This dialog is unnecessarily complicated.

// Rohit Mode dialog
<Dialog
  title="Dramatic Dialog"
  open={isOpen}
  onClose={() => setIsOpen(false)}
  rohitMode
>
  <p>This dialog is unnecessarily dramatic!</p>
</Dialog>

Note: In Rohit Mode, the dialog will wiggle, change color, and sometimes randomly reposition itself.

Props

Name	Type	Default	Description
title	string	-	Title text displayed in the dialog header
open	boolean	false	Whether the dialog is visible
onClose	function	-	Function called when the dialog is closed
children	ReactNode	-	Content of the dialog
className	string	-	CSS class to apply to the dialog container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Dialog component using styled-components:

import styled from 'styled-components';
import { Dialog } from 'rohit-ui';

const CustomDialog = styled(Dialog)`
  background: linear-gradient(45deg, var(--win98-silver), white);
  border: 3px solid var(--win98-navy);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3);
  
  .dialog-header {
    background: var(--win98-navy);
    color: white;
    padding: 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.2em;
  }
  
  .dialog-content {
    padding: 24px;
  }
  
  .dialog-footer {
    padding: 12px;
    border-top: 2px solid var(--win98-navy);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
`;

function MyComponent() {
  return (
    <CustomDialog
      title="Custom Dialog"
      open={isOpen}
      onClose={() => setIsOpen(false)}
    >
      <p>Custom styled dialog content</p>
    </CustomDialog>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Dialog component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reposition itself
Draw unnecessary attention to itself