Skip to main content

​
Introduction

Web XP includes a collection of reusable React components that recreate classic Windows XP UI elements. All components are built with styled-components for authentic Windows XP styling.

​
Core Components

​
Window Components

WindowDropDowns

Menu bar dropdown system for application windows (File, Edit, View, etc.)

​
UI Elements

Balloon

System notification balloon with fade animations and sound

SubMenu

Nested menu component with hover interactions and icons

VolumeSlider

XP-styled vertical volume control with mute checkbox

DashedBox

Desktop icon selection rectangle (drag-to-select)

​
Component Architecture

​
Styled-Components Pattern

All components follow a consistent pattern: 
import React from 'react';
import styled from 'styled-components';

function MyComponent({ className, ...props }) {
  return (
    <div className={className}>
      {/* Component JSX */}
    </div>
  );
}

export default styled(MyComponent)`
  /* Styled-components CSS */
`;
This pattern allows:
  • Separation of logic and styling
  • Props-based dynamic styling
  • Full CSS capabilities with JavaScript
  • Theme and context integration

​
Common Features

  • Windows XP Aesthetics: Authentic colors, shadows, and hover states
  • Keyboard & Mouse Interactions: Full event handling
  • Sound Integration: Components use VolumeContext for audio
  • Responsive Behavior: Adaptive layouts and positioning

​
Export Pattern

Components are exported from src/components/index.js: 
export { default as WindowDropDowns } from './WindowDropDowns';
export { default as Balloon } from './Balloon';
export { default as SubMenu } from './SubMenu';
export { default as DashedBox } from './DashedBox';

​
Usage Example

import { WindowDropDowns, Balloon, SubMenu } from 'components';

function MyApp() {
  return (
    <>
      <WindowDropDowns 
        items={menuData} 
        onClickItem={handleClick} 
      />
      <Balloon />
    </>
  );
}

​
Next Steps

WindowDropDowns

Learn about the dropdown menu system

Balloon

System notification component

SubMenu

Nested menu implementation

VolumeSlider

Volume control component

Build docs developers (and LLMs) love

Get started for freeTalk to us