About
eink-ui is a CSS-only component library optimized for E-Ink
displays (Kindle, Tolino, Kobo, and similar devices). It uses zero JavaScript,
no animations, and no hover-only affordances. Every value is a CSS custom
property. Specificity is kept at zero via :where() selectors.
E-Ink rationale: E-Ink screens have slow refresh rates (~300ms full, ~120ms partial). This library avoids large filled surfaces, animations, and layout shifts that cause unpleasant ghosting.
Getting started
<link rel="stylesheet" href="eink-ui.css">
Add data-theme="default" (or inverted /
high-contrast) to <html>. That's it.
GitHub
Source, issues, releases, and docs live on GitHub.
Theme preview
Each box below is scoped with its own data-theme.
Dark text on light background. Standard grayscale borders and muted text.
Light text on dark background. Good for night-mode on backlit E-Ink.
Pure black and white only. Thicker borders. Maximum legibility on low-DPI E-Ink.
Demo pages
- Typography — type scale, line length, prose
- Layout — container, stack, cluster, grid, divider
- Components — card, button, inputs, select, checkbox, radio, picture
- Forms — validation, errors, help text, disabled/required
- Dialog — native
<dialog>patterns - Tables — striped, bordered, responsive scroll
Selector strategy
All component selectors are class-based with the
.eink-* prefix. Every selector is wrapped in
:where() so specificity is always 0-0-0, making
overrides trivial without !important.