eink-ui

Card

E-Ink rationale: Cards use thin borders instead of box-shadows or filled backgrounds. This minimizes repaint area and renders crisply on 167–300 PPI E-Ink panels.

Buttons

E-Ink rationale: Buttons rely on border weight and fill contrast rather than shadows or color hues. The primary button inverts foreground/background for maximum contrast. Focus is shown with a solid outline ring.

Variants

Sizes

Disabled state

Focus state

Tab through the buttons below to see the focus ring. The :focus-visible style adds a 3px solid outline.

Button as link

Text input

E-Ink rationale: Inputs use a single thin border and no background fill. The focus state thickens the outline rather than changing background color, reducing repaint.

Textarea

Select

E-Ink rationale: Native <select> elements use the device's built-in dropdown UI, which is optimized for the E-Ink refresh cycle. The custom arrow indicator is rendered via CSS gradients (no SVG dependency).

Checkbox

E-Ink rationale: Custom checkboxes use appearance: none with a filled square indicator. This avoids the browser's native checkbox rendering, which can appear inconsistently across E-Ink device browsers.

Radio

E-Ink rationale: Same approach as checkbox — appearance: none with a filled circle indicator for the selected state.

Loader

E-Ink rationale: No animation. The loader uses a hashed fill with thin borders, so partial refreshes look clean and ghost-free.

Tooltip

E-Ink rationale: Tooltips appear on keyboard focus or when explicitly toggled — never hover-only — avoiding accidental flashes on slow-refresh displays.

Picture

E-Ink rationale: Images are wrapped in a bordered frame with a caption area separated by a thin rule. This clearly delineates image content from text, which is helpful on displays where images may appear as rough dithered grayscale.

Additional components

Borders and whitespace replace fills/shadows to avoid large repaints. All selectors remain zero-specificity via :where() and use semantic HTML only.