Window Component - Rohit UI

Import

import { Window } from 'rohit-ui';

Examples

Basic Window

My Window

This is a window. You can put anything inside!

// Basic window with title
<Window title="My Window">
  <p>Window content goes here</p>
</Window>

Window with Controls

My Window _ □ ✕

This window has controls in the title bar.

// Window with custom controls
<Window 
  title="Custom Controls"
  onMinimize={() => console.log('Minimized!')}
  onMaximize={() => console.log('Maximized!')}
  onClose={() => console.log('Closed!')}
>
  <p>This window has custom control handlers</p>
</Window>

Rohit Mode Window

ROHIT MODE

This window is unnecessarily complicated.

// Rohit Mode window
<Window 
  title="Unnecessarily Complicated"
  rohitMode
>
  <p>This window will wiggle and be dramatic</p>
</Window>

Note: In Rohit Mode, the window will wiggle, change color, and sometimes randomly move or resize itself.

Props

Name	Type	Default	Description
title	string	-	Title text displayed in the window's title bar
showControls	boolean	false	Show minimize, maximize, and close controls
children	ReactNode	-	Content of the window
className	string	-	CSS class to apply to the window container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Window component using styled-components:

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

const CustomWindow = styled(Window)`
  background: linear-gradient(to bottom, var(--win98-silver), white);
  border: 3px solid var(--win98-navy);
  border-radius: 8px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3);
  
  .window-header {
    background: linear-gradient(to right, var(--win98-navy), var(--win98-silver));
    color: white;
    padding: 12px 16px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.2em;
    border-bottom: 2px solid var(--win98-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .window-controls {
    display: flex;
    gap: 4px;
    
    .window-control {
      width: 16px;
      height: 16px;
      border: 1px solid var(--win98-black);
      background: var(--win98-silver);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      &:hover {
        background: var(--win98-gray);
      }
    }
  }
  
  .window-content {
    padding: 24px;
    background: white;
  }
`;

function MyComponent() {
  return (
    <CustomWindow
      title="Custom Window"
      onClose={() => console.log("Window closed")}
    >
      <p>Custom styled window content</p>
    </CustomWindow>
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Window component will:

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