Button
A button that runs an action.
Component Library
All 61 components
Every component rendered live from the eidotter npm package.
Each card says what the component does and links to Storybook for the API.
Inputs
Buttons, text fields, toggles, and filters — components that capture input.
Input
A labelled text field for one line of text.
Do:
Use the label prop for visible labels. Use errorMessage for validation feedback.
Don't:
Don't use placeholder text as the sole label — it vanishes on focus.
Sector not found.
Checkbox
Turns one option on or off. Use several to pick more than one.
Space to toggle
Switch
An on/off setting that takes effect at once.
Tab to focus, Space to toggle
FilterBar
A row of filters that narrows a list to one subset.
IconButton
A square button that shows only an icon, such as close or next.
Do:
Write the label as the action, such as "Close settings" or "Next image".
Don't:
Don't use it when the action needs a word to be clear. Use Button with text.
Default size, 36px: close, previous, next, disabled
Window size, 28px, for dense title strips
Bare variant, no outline at rest
Touch size, 44px, for stage and kiosk screens
Inherit tone: takes the bar's text colour
STATUS: READY
Feedback
Status, progress, and system state — communicated back to the user.
Alert
A message box in the page that stays until dismissed.
Do:
Match the color to the severity. Use title for the headline and children for supporting text.
Don't:
Don't use alerts for transient feedback like "Saved!" — use Notification with auto-dismiss.
System initialized
All modules loaded.
Configuration saved
Changes written to disk.
Low disk space
Drive C:\ is running low.
Fatal error
Sector not found.
Notification
A short toast message. Your app places it and decides when it goes.
Do:
Use for transient feedback. Set duration for auto-dismiss. Stack in a fixed container.
Don't:
Don't use for persistent messages — use Alert instead.
File saved
AUTOEXEC.BAT written to disk.
Low memory
Conventional memory below 128K.
Disk error
Bad sector on drive A:
Badge
A small label for a status or a count.
Default Success Warning Error Info Accent
Small With Dot
Progress
A bar that shows how much of a task is done.
75%
[]
Stat
One number with a label and an optional trend.
Components61
Themes6new
Tests638
Layout
Containers, accordions, tabs, and navigation — structure for your content.
Card
A box that groups related content under an optional title.
Do:
Use one variant consistently within a grid. Reserve glow for a single highlighted item.
Don't:
Don't nest cards — use Section for sub-groups.
Default
Default card with basic content.
Elevated
Elevated card variant.
Glow
Card with phosphor glow.
DosWindow
A window frame with a title strip, for panels in the page.
SYSTEM.LOG
Backup finished at 08:00. Drive C:\ is at 64%.
Section (Accordion)
A section that opens and closes when you click its heading.
No network adapter detected.
AccordionFill
An accordion built from a list of titles and texts.
Five CGA themes: amber-mono, cga-amber, mode4-p0, mode4-p1, and mode5.
Yes — WCAG 2.1 AA compliant with full keyboard navigation.
Modal
A dialog that keeps keyboard focus inside until you close it.
Do:
Keep modal content focused on a single task. Provide a clear way to dismiss.
Don't:
Don't trap reference content in a modal — use InlineExpand so users can read and work at once.
CONFIRM.EXE
Are you sure you want to format C:\?
Static preview: Modal's DosDialog chrome rendered with inline. The DosDialog card below opens a live dialog.
DosDialog
The overlay frame that Modal, Lightbox and CmdPalette use.
Do:
Pass a close IconButton in the head. DosDialog does not add one for you.
Don't:
Don't open one dialog over another. Every dialog shares one z-index layer.
Inline: the same chrome in the page, no overlay, no JS
SETTINGS.SYS
CRT effects: on. Theme: amber.
Overlay: opens a live dialog
CmdPalette
Opens with ⌘K, filters a list as you type, and runs the item you pick.
Do:
Surface high-frequency verbs the user knows by name. Keep labels imperative.
Don't:
Don't use it as a generic search — it's a verb launcher, not a query tool.
Tabs
Switches between panels of related content.
Do:
Keep tab labels short (1-2 words). Use underline for content tabs, pills for mode switching.
Don't:
Don't use tabs for sequential steps — that implies a wizard, not navigation.
Underline (default)
Files
Memory
Devices
Pills variant
All
Active
Archived
Breadcrumb
Shows where the current page sits in the site.
Nav
A list of site links that folds into a menu on phones.
Retro variant (default)
Modern variant
Header
The bar at the top of a site with the brand and the nav.
This site's header is a live Header component. Scroll up to see it.
Display menu in the end slot
The Display menu at the right of this site's header has two switches. DOS sets the style: on is a DOS theme (switching it on picks amber-mono), off is the modern light theme (eidotter/themes/light.css). LIGHT sets the brightness within DOS: on is amber-paper (eidotter/themes/amber-paper.css: black ink on an amber ground), off is amber-mono. Under the modern theme the LIGHT switch is not shown; switching DOS back on brings it back. The menu sets data-theme on <html> and remembers the choice in this browser. A small script in <head> applies the saved theme before the page paints and points the theme-color meta at the theme's background. The end slot sits after the nav on wide screens and before MENU on phones.
PageShell
One column for a whole page: header, sections and footer on one left edge.
Do:
Put the Header in the header slot with layout="stacked" and rule={false}. Put each block in a PageSection.
Don't:
Don't draw rules between sections. Spacing separates them.
EXAMPLE.COM
Home · Notes · About
Notes
Header, sections and footer share one left edge, 40px apart, with no dividers.
A small PageShell with a 480px column. Use contentAs="div" when your layout already has a <main>. The Storybook template ReviewPage shows PageShell, a stacked Header and Bench together.
Separator
A line between two blocks of content.
Do:
Use between logical sections of content to create breathing room.
Don't:
Don't stack separators or use between every element — let spacing do that work.
Section A Section B
Bench
Shows two versions side by side, such as before and after.
Do:
Label each pane with what it shows. Give screenshots alt text.
Don't:
Don't use it for a single image. Use DosFigure.
Page heading
Before: the heading is centred. After: it sits on the column edge.
Before
README.TXT
Brand, nav and text on one left edge.
After
README.TXT
Brand, nav and text on one left edge.
The panes sit side by side when the bench is at least 760px wide, and stack below that.
Footer
The bar at the bottom of a page with legal and other links.
Do:
Place once in your layout. Pass legal links relevant to your jurisdiction.
Don't:
Don't duplicate footer content — use the component's link props.
The footer at the bottom of this page is a live Footer component.
Content
Text, code, icons, and inline content — displayed and interactive.
Terminal
A read-only DOS window for command output and code.
C:\> dir /w
Volume in drive C is EIDOTTER
BUTTON TSX CARD TSX ALERT TSX
BADGE TSX INPUT TSX MODAL TSX
61 file(s) 128,000 bytes free
CommandPrompt
A DOS command line that runs a callback when you press Enter.
Enter to submit command
InlineExpand
A phrase in a paragraph that opens its explanation in place.
eiDotter ships
InlineLink
A link inside running text.
Read more in the component categories, browse the Storybook, or check the repository.
DosFigure
A frame for screenshots and placeholder images, with optional notes.
⌘K
- CUE
- RUN
Tag
A label you can select or remove.
Default Outlined Filled Selected
Small Medium Disabled
TagGroup
Lays out a set of tags and handles their keyboard behaviour.
React TypeScript CSS Storybook Vite
TextScramble
Text that cycles through random characters before it settles.
Icon
Pixel-art icons from pixelarticons (MIT) that take the colour of the text around them.
Health & metabolism
These components show reserves, what is still active, and how far a value is from a target. Your app supplies the bands, targets and labels as props. The demos use sample data.
Gauge
A ring that shows one value as a percent.
Do:
Mark estimated values with provenance so readers know where a number comes from.
Don't:
Don't use a gauge for values over time. Use SeriesBars for that.
72%720 units
Sample energy
38%380 units
Sample reserveestimated
--
Sample offline
Meter
A bar that shows how full a reserve is, with an optional target range.
Do:
Give the optimal range on the same scale as the value.
Don't:
Don't rely on color alone. Each tone has a fill pattern and a text label.
72 units
Sample reserve AA
48 units
Sample reserve BB
61 units
Sample reserve CC
Sample level
64 units
RangeBar
One bar split into parts that add up to the whole.
SeriesBars
A short row of bars measured against a goal line.
unit="%" adds the unit to the screen-reader summary, the value table and the bar titles, so the goal reads "60 %".
DecayStrip
Shows how much of something is still active over time.
Do:
Pass the current time in. The strip never reads the clock.
Don't:
Don't leave out provenance. It is required so readers can tell modelled values from measured ones.
- 40 units55%Sample mealestimated
8:00 AM█████▓▓▓│▓▒▒▒▒▒▒▒▒░░░░░░5:00 PM
modelledVitalsStrip
A row of monitor-style tiles, one per reading.
Sample vital64 unitssample
Sample pair124/78 units
Sample readingunknown
Sample alert12 units
Timeline
Events, milestones, and versions plotted along a time axis.
TimelineNode
A single marker on a timeline.
v0.1
v0.5
v1.0
Circle
Square
Diamond
TimelineContainer
A timeline you can zoom, scroll, list or open entry by entry.
Do:
Use interactive mode for exploratory timelines, static mode for read-only feeds, and master-detail when an entry needs to open into a full reading pane while the timeline stays as navigation.
Don't:
Don't use interactive mode for simple lists — static mode is lighter and more readable.
Interactive mode (default)
Static mode (vertical feed)
Sep 20, 2025
Jan 10, 2025
Jun 1, 2024
Jan 15, 2024
Master-detail mode (level-3 split view)
Static previews — see Storybook for interactive zoom, keyboard, and master-detail navigation.
Chat
Presentational messaging components — no AI SDK dependency. Compose inside Terminal for a DOS chat window.
ChatMessage
One message in a chat, styled by who sent it.
Do:
Use inside ChatHistory or a custom list. Set role to "user", "assistant", or "system".
Don't:
Don't use for non-chat content — use Alert or Card instead.
List all sectors on drive A:
3 sectors found. All nominal.
Session started.
Effects
Overlays and animations that bring CRT character to any page.
RetroEffects
Adds CRT scanlines, glow and flicker over the whole page.
The scanlines, glow, and flicker on this page come from the
RetroEffects component — a fixed CSS overlay.
Scanlines Glow Flicker Bloom (off)