Der NotionKit-Look, als Elemente.
68 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>
.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 und Board mit polymorphen Zellen und Drag & Drop.
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.1.1/notionkit.min.css"> <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.0.1/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>