Web Components
These demos show eink-ui components rendered as
custom elements (Light-DOM Web Components). The same CSS
library powers both approaches — the web components simply map element
attributes to the underlying .eink-* classes automatically.
Web components require a small JavaScript module
(dist/wc/index.js). If you need zero-JS output, use the
CSS-only demos instead.
Setup
<link rel="stylesheet" href="dist/eink-ui.css">
<script type="module">
import { defineEinkElements } from "dist/wc/index.js";
defineEinkElements();
</script>
After calling defineEinkElements(), all custom elements are
registered and ready to use.
Available components
Layout primitives
| Custom element | CSS equivalent | Key attributes |
|---|---|---|
<eink-container> |
.eink-container |
width="wide|narrow" |
<eink-stack> |
.eink-stack |
gap="sm|lg" |
<eink-cluster> |
.eink-cluster |
gap="..." (CSS value) |
<eink-grid> |
.eink-grid |
min="..." (CSS value) |
<eink-divider> |
.eink-divider |
strong |
<eink-section> |
.eink-section |
— |
<eink-page-header> |
.eink-page-header |
— |
<eink-page-footer> |
.eink-page-footer |
— |
UI components
| Custom element | CSS equivalent | Key attributes |
|---|---|---|
<eink-button> |
.eink-btn |
variant, size, disabled |
<eink-card> |
.eink-card |
raised |
<eink-alert> |
.eink-alert |
variant="info|success|warning|error" |
<eink-tag> |
.eink-tag |
variant="filled|muted" |
<eink-badge> |
.eink-badge |
— |
Form components
| Custom element | CSS equivalent | Key attributes |
|---|---|---|
<eink-input> |
.eink-input |
type, placeholder, disabled, aria-invalid |
<eink-textarea> |
.eink-textarea |
placeholder, disabled, aria-invalid |
<eink-select> |
.eink-select |
disabled, aria-invalid |
<eink-checkbox> |
.eink-checkbox |
checked, disabled, name, value |
<eink-radio> |
.eink-radio |
checked, disabled, name, value |
Demo pages
- Layout — container, stack, cluster, grid, divider, page structure
- Components — card, button, alert, tag, badge
- Forms — input, textarea, select, checkbox, radio
View CSS-only demos for typography, tables, dialog, and full-page examples (newsreader, blog, dashboard).
CSS-only vs Web Components
| Aspect | CSS-only | Web Components |
|---|---|---|
| JavaScript required | No | Yes (small module) |
| Authoring | class="eink-btn eink-btn--primary" |
<eink-button variant="primary"> |
| Attribute sync | Manual class management | Automatic via observed attributes |
| Shadow DOM | N/A | None (Light DOM) |
| E-Ink compatibility | Maximum | Same CSS, minimal JS overhead |