The NotionKit look, as elements.
87 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>
Before โ .nk-* classes
- Status
- In progress
- Owner
- MKMarcel Karas
- Progress
- 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 progress</span></dd></div> <div class="nk-prop"><dt class="p-name"><span class="p-icon">๐ค</span>Owner</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>Progress</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>
After โ one element
<nk-props> <nk-prop label="Status" icon="โ"><nk-tag color="blue">In progress</nk-tag></nk-prop> <nk-prop label="Owner" icon="๐ค"><nk-avatar size="small">MK</nk-avatar>Marcel Karas</nk-prop> <nk-prop label="Progress" icon="โฐ"><nk-progress value="65" label="65 %" wide></nk-progress></nk-prop> </nk-props>
.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, a board and a list with polymorphic cells and drag & drop โ and the same pageโs properties with <nk-props>.
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.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="๐ก">A callout carries one thought that must not be missed.</nk-callout> </body>