A DOS Themed Design System
npm install eidotterbash
npm install eidotter
or
yarn add eidotter
or
pnpm add eidotter
`
Quick Start
`jsx
import { Terminal, Button, Alert } from 'eidotter';
import 'eidotter/dist/style.css';
function App() {
return (
DOS interface loaded successfully.
);
}
`
Available Components (v0.3.0)
| Component | Description |
|-----------|-------------|
| Accordion | Collapsible content sections |
| Alert | System notifications (info, success, warning, error) |
| Badge | Status indicators with variant support |
| Breadcrumb | Navigation path display |
| Button | DOS-style buttons with variants (primary, secondary, ghost, link) |
| Card | Content container with title, body, and optional footer |
| Checkbox | DOS-style checkbox with [X] indicator |
| CommandPrompt | Interactive command-line input with blinking cursor |
| Icon | SVG icon system with DOS styling |
| Input | Text input with DOS styling and error variant |
| Progress | DOS-style progress bar with block characters |
| RetroEffects | CRT effects (scanlines, noise, phosphor glow) |
| Switch | Toggle switch for on/off states |
| Tabs | Tabbed interface navigation |
| Terminal | DOS window with title bar, controls, and content area |
| TimelineNode | Timeline/stepper axis markers with shapes and glow |
Component Examples
$3
`jsx
title="PROGRAM.EXE"
size="medium"
closeable
onClose={() => console.log('closed')}
>
Terminal content here
`
$3
`jsx
`
$3
`jsx
type="warning"
title="Low Disk Space"
onClose={() => {}}
>
Drive C: has only 640KB remaining.
`
$3
`jsx
placeholder="Enter filename..."
variant="default"
/>
variant="error"
placeholder="Invalid path"
/>
`
$3
`jsx
prompt="C:\>"
onCommand={(cmd) => console.log('Executing:', cmd)}
autoFocus
/>
`
$3
`jsx
sections={[
{ title: 'Section 1', content: 'Content 1' },
{ title: 'Section 2', content: 'Content 2' },
]}
defaultExpandedIndex={0}
/>
`
Design Tokens
The library uses authentic CGA colors:
`css
--color-cga-black: #000000;
--color-cga-blue: #0000AA;
--color-cga-cyan: #00AAAA;
--color-cga-yellow: #FFFF55;
--color-cga-white: #FFFFFF;
--color-cga-amber: #FFBF00;
/ ... full 16-color CGA palette + amber /
`
$3
Apply the DOS amber theme (amber-on-black terminal aesthetic):
`html
`
Or via CSS class:
`html
...
`
Tailwind CSS Integration
Use Eidotter tokens in Tailwind projects without importing React components.
$3
`javascript
// tailwind.config.js
module.exports = {
presets: [require('eidotter/tailwind.preset')],
content: ['./src/*/.{js,jsx,ts,tsx}'],
};
`
$3
`jsx
// CGA palette colors
DOS terminal content
// Semantic colors
Using semantic tokens
// Typography
Perfect DOS VGA 437 font
`
$3
CGA Colors: cga-black, cga-blue, cga-green, cga-cyan, cga-red, cga-magenta, cga-brown, cga-light-gray, cga-dark-gray, cga-bright-blue, cga-bright-green, cga-bright-cyan, cga-bright-red, cga-bright-magenta, cga-yellow, cga-white, cga-amber, cga-amber-bright, cga-amber-dim
Semantic Colors: dos-bg-primary, dos-bg-secondary, dos-text-primary, dos-text-accent, dos-border-default, dos-border-focus, dos-success, dos-warning, dos-error, dos-info
Typography: font-dos, text-dos-xs through text-dos-4xl, leading-dos-tight/normal/loose
Development
`bash
Install dependencies
npm install
Run Storybook
npm run storybook
Build library
npm run build
Run tests
npm run test
``