Eidotter
A DOS-themed React component library with authentic CGA terminal aesthetics. The shared design foundation for Timeline OS applications.
added 1 package in 2.3s
The Problem
Building applications within the Timeline OS ecosystem means maintaining a consistent visual language across React web apps, React Native mobile apps, and native iOS apps. Without a shared design system, each project reinvents the wheel—leading to inconsistent aesthetics, duplicated effort, and drift from the core DOS terminal philosophy.
Existing component libraries either lack the retro aesthetic entirely or treat it as a novelty rather than a serious design language. They don't provide the authentic CGA color palette, the proper typography weight, or the subtle details like phosphor glow and scanline effects that make the DOS aesthetic feel genuine.
The Solution
Eidotter is a React component library that brings authentic DOS terminal aesthetics to modern web applications. Born from the Timeline OS vision, it provides a consistent design language across multiple projects while celebrating the clarity and control of command-line interfaces.
The library uses the authentic 16-color CGA palette plus amber variants, delivering that nostalgic phosphor glow feel without sacrificing modern accessibility standards. Every component is built with TypeScript, fully tested, and documented in Storybook.
Available Components
Terminal
DOS window with title bar, controls, and content area
CommandPrompt
Interactive command-line input with blinking cursor
Button
Primary, secondary, ghost, and link variants
Alert
Info, success, warning, and error notifications
Card
Content container with title, body, and footer
Input
Text input with DOS styling and error states
Checkbox
DOS-style checkbox with [X] indicator
Progress
Progress bar with authentic block characters
Accordion
Collapsible content sections
Badge
Status indicators with variant support
Tabs
Tabbed interface navigation
Switch
Toggle switch for on/off states
Breadcrumb
Navigation path display
TimelineNode
Timeline markers with shapes and glow
RetroEffects
CRT scanlines, noise, and phosphor glow
Icon
SVG icon system with DOS styling
Design Token System
At the heart of Eidotter is a robust design token pipeline powered by Style Dictionary. Tokens are defined in JSON and compiled to CSS variables, enabling consistent theming across any platform.
Tailwind CSS Integration
For projects that prefer utility-first CSS, Eidotter exports a Tailwind preset. This brings CGA colors, DOS typography, and semantic tokens directly into your Tailwind config without requiring React component imports.
// tailwind.config.js
module.exports = {
presets: [require('eidotter/tailwind.preset')],
content: ['./src/**/*.{js,jsx,ts,tsx}'],
};
// Usage in components
<div className="bg-cga-black text-cga-amber font-dos">
DOS terminal content
</div>Used In
Eidotter serves as the design foundation for the Timeline OS ecosystem:
Rizomorf
This portfolio site - using tokens and aesthetic principles
Pomodoke Calendar
AI-powered scheduling with Eidotter Tailwind preset
EatThisDie
Diabetes management iOS app with amber CGA theme
Tracker
Habit tracking with MDA-inspired monochrome themes
Tech Stack
Development Log
Published tailwind.preset.js for projects that prefer utility-first CSS without React component imports.
All 16 components now have full Storybook documentation with usage examples and variant showcases.
Migrated design tokens to Style Dictionary for cross-platform token generation (CSS, JSON, TypeScript).
First public release with core components: Button, Alert, Terminal, CommandPrompt, Input, Checkbox.
Design Philosophy
The DOS aesthetic represents more than nostalgia. It embodies control, clarity, and personal sovereignty over our digital tools. Eidotter brings these values to modern interfaces while maintaining accessibility and usability standards.
Explore the Source