Der NotionKit-Look, als Elemente.
87 Vanilla-JS-Web-Components über der NotionKit-CSS-Foundation: gleicher Wortstamm, gleiche Tokens, Shadow DOM, automatischer Hell/Dunkel-Abgleich, native Formular-Teilnahme – und Pixel-Parität mit dem Klassen-Markup, in beiden Themes gemessen.
Die Referenz-App
Die NotionKit-Demo-App, nur aus Elementen neu gebaut – 0,00 % Pixelabweichung zur Klassen-Version am Desktop.
Gleicher Look, ein Bruchteil des Markups
Vorher – .nk-*-Klassen
<div class="nk-field"> <div><div class="f-label">E-Mail-Benachrichtigungen</div><div class="f-desc">Erscheint neben deinen Kommentaren.</div></div> <div class="f-control"><button class="nk-switch" role="switch" aria-checked="true"></button></div> </div> <div class="nk-callout"><span class="c-icon">💡</span><div>Ein Callout trägt einen Gedanken, der nicht untergehen darf.</div></div> <div class="nk-tree-item active"><span class="icon">🚀</span><span class="label">NotionKit MVP</span><span class="actions"><span>＋</span><span>⋯</span></span></div>
Nachher – ein Element
<nk-field label="E-Mail-Benachrichtigungen" desc="Erscheint neben deinen Kommentaren."><nk-switch checked></nk-switch></nk-field> <nk-callout icon="💡">Ein Callout trägt einen Gedanken, der nicht untergehen darf.</nk-callout> <nk-tree-item icon="🚀" active>NotionKit MVP</nk-tree-item>
Vorher – .nk-*-Klassen
- Status
- In Arbeit
- Verantwortlich
- MKMarcel Karas
- Fortschritt
- 65 %
<dl class="nk-props"> <div class="nk-prop"><dt class="p-name"><span class="p-icon">◉</span>Status</dt><dd class="p-value"><span class="nk-tag blue">In Arbeit</span></dd></div> <div class="nk-prop"><dt class="p-name"><span class="p-icon">👤</span>Verantwortlich</dt><dd class="p-value"><span class="nk-avatar small">MK</span>Marcel Karas</dd></div> <div class="nk-prop"><dt class="p-name"><span class="p-icon">▰</span>Fortschritt</dt><dd class="p-value"><span class="nk-progress wide"><i style="width:65%"></i></span><span class="nk-progress-label">65 %</span></dd></div> </dl>
Nachher – ein Element
<nk-props> <nk-prop label="Status" icon="◉"><nk-tag color="blue">In Arbeit</nk-tag></nk-prop> <nk-prop label="Verantwortlich" icon="👤"><nk-avatar size="small">MK</nk-avatar>Marcel Karas</nk-prop> <nk-prop label="Fortschritt" icon="▰"><nk-progress value="65" label="65 %" wide></nk-progress></nk-prop> </nk-props>
.nk-callout wird <nk-callout>; eine Modifikator-Klasse wird Attribut, eine Zustandsklasse ein Boolean-Attribut.
Jedes Element rendert identisch zu seinem Klassen-Markup – geprüft durch einen Playwright-Pixeltest in Hell und Dunkel.
data-theme auf <html>; ein Observer spiegelt es in jedes Element. Einmal auf :root branden, alle Elemente folgen.
Inputs, Selects, Switches, Checks, Radios und Slider nehmen an FormData, Reset und Validierung teil.
<nk-database> bekommt Spalten und Zeilen und liefert Tabelle, Board und Liste mit polymorphen Zellen und Drag & Drop – und die Eigenschaften derselben Seite mit <nk-props>.
Einstellungs-Modal, ⌘K-Palette, Menüs, Popover und Toasts mit Fokusführung, inert und Tastatur.
Schnellstart
class="nk-body" auf <body> setzen<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.21.0/notionkit.min.css"> <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.21.0/dist/notionkit-elements.min.js"></script> <body class="nk-body"> <nk-callout icon="💡">Ein Callout trägt einen Gedanken, der nicht untergehen darf.</nk-callout> </body>