v0.45.0 — React Aria · Tailwind · 6 Themes · 61 Components
A DOS design system
For interfaces that invite focus.
⌘K or Ctrl+K opens the command palette on every page.
C:\> npm install eidotter
Installing dependencies...
✓ Added 19 packages
C:\> import { CmdPalette } from 'eidotter'
C:\> import 'eidotter/themes/amber-mono.css'
Ready. 61 components · 6 themes loaded.
C:\>
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 works on every page of this site. Type where you want to go and press return.
v0.41 · Dialogs and windows
One window chrome.
Dialogs, panels, cards and figures share one title strip, and every close button is the same IconButton. Press Try it to open the overlay version.
README.TXT
This window and the dialog draw the same strip and border.
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 and it opens in place while the timeline stays your nav. Read the full devlog.
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 shipped61+3 in v0.41
v0.40 · Health & metabolism
See what the body does with the last meal, not one number.
The health family ships no medical defaults. Bands, targets and labels come from your app.
72%720 units
Sample energyEnergy
72 units
Sample reserve AA
48 units
Sample reserve BB
61 units
Sample reserve CC
Sample data, illustrative
Theme System
6 themes
One CSS import swaps the entire palette. Five themes match a real CGA hardware mode. Amber paper reverses the default: black ink on an amber ground.
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, so you bundle only what you use.
4
Tailwind? Covered.
Use our preset: require('eidotter/tailwind.preset') in your config.