DOSage

A TypeScript component library recreating DOS-era interfaces for modern web applications.

╔═══════════════════════════════════════════════════════════════════╗
║                                                                   ║
║   ██████╗  ██████╗ ███████╗ █████╗  ██████╗ ███████╗              ║
║   ██╔══██╗██╔═══██╗██╔════╝██╔══██╗██╔════╝ ██╔════╝              ║
║   ██║  ██║██║   ██║███████╗███████║██║  ███╗█████╗                ║
║   ██║  ██║██║   ██║╚════██║██╔══██║██║   ██║██╔══╝                ║
║   ██████╔╝╚██████╔╝███████║██║  ██║╚██████╔╝███████╗              ║
║   ╚═════╝  ╚═════╝ ╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝              ║
║                                                                   ║
╚═══════════════════════════════════════════════════════════════════╝
Copy

Features

• Pure TypeScript — Full type safety with comprehensive type definitions
• Zero Dependencies — No runtime dependencies, minimal footprint
• Framework Agnostic — Works with vanilla JS/TS, React, Vue, or any framework
• Accessible — Full ARIA support and keyboard navigation
• Themeable — Multiple preset themes + custom theme support
• DOS Authentic — Faithful recreation of DOS-era aesthetics

Installation

npm install dosage
Copy

Quick Start

import { createButton, ThemeManager } from 'dosage';
import 'dosage/css';

// Initialize theme
ThemeManager.setTheme('dos-blue');

// Create a button
const button = createButton({
  label: 'Click Me!',
  variant: 'primary',
  onClick: () => alert('Hello, DOS!'),
});

document.body.appendChild(button);
Copy

Themes

DOSage includes several preset themes:

Theme	Description
dos-blue	Classic DOS blue screen (default)
amber	Amber monochrome monitor
green-phosphor	Green phosphor CRT
cga	IBM CGA 16-color palette

import { ThemeManager } from 'dosage';

// Set theme
ThemeManager.setTheme('amber');

// Get current theme
const current = ThemeManager.getTheme();

// Register custom theme
ThemeManager.registerTheme('my-theme', {
  name: 'my-theme',
  colors: {
    bg: '#1a1a2e',
    fg: '#eee',
    // ...
  },
  // ...
});
Copy

Components

Layout

• Container
• Panel
• Box
• Grid
• Divider
• Separator

Typography

• Heading
• Text
• Code
• CodeBlock
• Blockquote
• List
• DefinitionList
• Label
• ASCIIArt

Form Controls

• Button
• ButtonGroup
• IconButton
• Link
• TextInput
• Textarea
• Checkbox
• RadioButton
• Select
• Slider

Feedback

• Alert
• Toast
• ProgressBar
• Spinner
• Skeleton
• Tooltip

Navigation

• Menu
• ContextMenu
• Tabs
• Breadcrumb
• Pagination

Data Display

• Table
• Card
• Badge
• Avatar
• Window
• Dialog

Accessibility

All components are built with accessibility in mind:

• Full keyboard navigation
• ARIA attributes
• High contrast focus states
• Screen reader friendly

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

# Install dependencies
npm install

# Start demo server
npm run dev

# Run tests
npm test

# Build library
npm run build
Copy

License

MIT © DOSage Contributors

---

Bringing the nostalgic DOS aesthetic to modern web applications 💾