eiDotter — A DOS Design System

Amber on black

My dad's 286. Amber phosphor on not-quite-black. The soft sound of floppy disks. A blinking cursor.

I played Commander Keen and Space War. I wrote story games in Turbo Pascal. The machine didn't notify me, didn't scroll infinitely, didn't fight for my attention. It just waited — ready when I was.

That's what eiDotter is for. Interfaces that feel like that cursor: present, patient, yours to command.

Your attention belongs to you.

v0.20 · Keyboard-native

A command palette built for the keyboard.

⌘K from anywhere. Type a verb, hit return. The fastest path between intention and result.

Conversational primitives

Conversations in phosphor.

A chat surface that reads like a session log. Static-safe. No streaming framework required.

Timeline-native

Built for time, not feed.

Version milestones and devlog entries on the same primitive that powers Timeline OS. Pick any entry — it opens in place while the timeline stays your nav. Read the full devlog.

v0.20.1 sweep on eidotter.com plus a Timeline vignette that now surfaces real devlog entries alongside the version milestones.

Feedback patterns

Feedback that doesn't beg for attention.

Inline alerts for context. Notifications for what shouldn't be missed. Both stay out of the way.

LOW DISK SPACE

Drive C:\ at 92%. Archive old sessions to free up sectors.

BUILD COMPLETE

eidotter.com built in 2.4s · 12 routes · 0 warnings.

Data display

Data you can read at a glance.

One headline number. Three bars below it. The same stack you'd see on a sysadmin's monitoring shell.

Components shipped┤┤+3 in v0.20

░░░░░░░░░░░░░░░░░░░░████████████████████50%

░░░░░░░░░░░░░░░░░░░░████████████████████78%

Theme System

5 CGA Themes

One CSS import swaps the entire palette. Each theme matches a real CGA hardware mode.

Amber Mono

CGA Amber

Mode 4 P0

Mode 4 P1

Mode 5

Quick Start

Install

# Install the package
npm install eidotter

# Import components
import { CmdPalette, Terminal, Button } from 'eidotter'
import 'eidotter/themes/amber-mono.css'

# Use in your app
<Button variant="primary">
  Execute
</Button>

1

Install via npm

Run npm install eidotter (or yarn, pnpm — your call).

2

Pick a theme

Import one theme CSS file — say, eidotter/themes/amber-mono.css — and the phosphor look kicks in.

3

Use components

Import individual components. Tree-shakeable — bundle only what you use.

4

Tailwind? Covered.

Use our preset: require('eidotter/tailwind.preset') in your config.

Ready to Boot Up?

Build interfaces with intention. Open source, ready now.

View on GitHub Browse Components

A DOS design system