The NotionKit look, as elements.
68 vanilla-JS Web Components wrapping the NotionKit CSS foundation: same word stem, same tokens, Shadow DOM, automatic light/dark sync, native form participation โ and pixel parity with the class markup, measured in both themes.
The reference app
The NotionKit demo app, rebuilt from elements only โ 0.00 % pixel difference to the class version on desktop.
Same look, a fraction of the markup
Before โ .nk-* classes
<div class="nk-field"> <div><div class="f-label">Email notifications</div><div class="f-desc">Shown next to your comments.</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>A callout carries one thought that must not be missed.</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>
After โ one element
<nk-field label="Email notifications" desc="Shown next to your comments."><nk-switch checked></nk-switch></nk-field> <nk-callout icon="๐ก">A callout carries one thought that must not be missed.</nk-callout> <nk-tree-item icon="๐" active>NotionKit MVP</nk-tree-item>
.nk-callout becomes <nk-callout>; a modifier class becomes an attribute, a state class a boolean attribute.
Every element renders identically to its class markup โ checked by a Playwright pixel test in light and dark.
data-theme on <html>; one observer mirrors it into every element. Brand once on :root, all elements follow.
Inputs, selects, switches, checks, radios and sliders take part in FormData, reset and validation.
Give <nk-database> columns and rows; get a table and a board with polymorphic cells and drag & drop.
Settings modal, โK palette, menus, popovers and toasts with focus handling, inert and keyboard support.
Quick start
class="nk-body" on <body><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="๐ก">A callout carries one thought that must not be missed.</nk-callout> </body>