A CSS component library
built for E-Ink displays
A CSS-first design system optimized for E-Ink readers like Kindle, Tolino, and Kobo. 46+ components with zero JavaScript required. Three built-in themes and optional Web Components for progressive enhancement.
Built for E-Ink, useful everywhere
Every design decision optimized for slow-refresh, high-contrast displays.
No animations, no hover-only affordances, no large filled surfaces. Designed to minimize ghosting and partial refreshes on 300ms screens.
The entire CSS layer works without a single line of JavaScript. Progressive enhancement via optional Web Components.
Every selector wrapped in :where() for 0,0,0 specificity. Override anything without !important. Plays nice with your styles.
Built on native HTML elements: <dialog>, <details>, <fieldset>. No div soup. Accessible by default.
Default, inverted, and high-contrast themes via CSS custom properties. Switch with a single data attribute on <html>.
Optional light-DOM custom elements map 1:1 to CSS classes. Same styles, cleaner markup. No Shadow DOM.
Component showcase
A sample of the 46+ components included. All rendered live with eink-ui CSS.
- Version
- 1.0.0
- License
- MIT
Two ways to use it
Use CSS classes directly, or opt into Web Components for cleaner markup. Same styles, your choice.
<div class="eink-card eink-card--raised">
<div class="eink-card__title">Hello</div>
<div class="eink-card__body">
<p>A simple card component.</p>
<button class="eink-btn eink-btn--primary">
Action
</button>
</div>
</div><eink-card raised>
<div class="eink-card__title">Hello</div>
<div class="eink-card__body">
<p>A simple card component.</p>
<eink-button variant="primary">
Action
</eink-button>
</div>
</eink-card>Three built-in themes
Switch themes with a single data-theme attribute. Every color is a CSS custom property.
Dark text on light background. Standard grayscale palette.
Light text on dark background. Night mode for backlit E-Ink.
Pure black and white. Maximum legibility on low-DPI panels.
E-Ink screens refresh at 300ms. Every pixel matters, every repaint costs. This library embraces those constraints — borders over fills, whitespace over color, clarity over decoration.
Real-world examples
Full-page demos built entirely with eink-ui components.
Getting started
1. Include the CSS
<link rel="stylesheet" href="eink-ui.css">Or import the three individual files for finer control: tokens, base, and components.
2. Set a theme
<html data-theme="default">Choose from default, inverted, or high-contrast.
3. Use components
<button class="eink-btn eink-btn--primary">Click me</button>
<div class="eink-card">
<div class="eink-card__title">Title</div>
<div class="eink-card__body">Content</div>
</div>4. Optional: Add Web Components
<script type="module">
import { defineEinkElements } from "eink-ui/wc";
defineEinkElements();
</script>Web Components are optional progressive enhancement. The CSS works without them.
Explore the docs
Detailed demos for every component category.