App shell .nk-app

html<div class="nk-sidebar-backdrop open"></div>   <!-- phones: the drawer's scrim -->
<aside class="nk-sidebar open">…</aside>         <!-- slides in over the page -->
<button class="nk-topbar-btn nk-sidebar-toggle" aria-label="Menu">☰</button>

jscollapseBtn.addEventListener('click', () => {            // the « in .nk-sidebar-head
  sidebar.classList.add('collapsed');                      // slides out on the desktop
  sidebarToggle.classList.add('collapsed');                // the ☰ in the topbar brings it back
});

Workspace switcher .nk-workspace

Topbar .nk-topbar

Tab bar (mobile) .nk-tab-bar

html<nav class="nk-tab-bar fixed">…</nav><div class="nk-tab-bar-spacer"></div>

Breadcrumb .nk-breadcrumb

Section label .nk-section-label

Tree item .nk-tree-item

Nested tree & toggle arrow .nk-tree-children

Keyboard hint .nk-kbd

Page column & page options .nk-page

Page properties .nk-props

Cover .nk-cover

Headings & lead .nk-heading

Callout .nk-callout

Bookmark .nk-bookmark

NotionKit – the calm workspace look as CSS NotionKit is a pure CSS component library in the Notion idiom: sidebar, page tree, document shell, database views, settings and AI surfaces. https://notionkit.jungherz.com

To-do .nk-todo

Toggle .nk-toggle

Quote & divider .nk-quote

Inline mentions .nk-mention

Code .nk-code

Prose .nk-prose

Class only, on purpose: ::slotted() reaches the slotted node and never a paragraph inside it, so a <nk-prose> element could not style its content. Put the class on a light-DOM container, also inside NotionKit Elements.

View tabs .nk-db-tabs

Toolbar & filter pills .nk-db-toolbar

Table view .nk-table

Tags .nk-tag

Progress bar .nk-progress

Board view .nk-board

List view .nk-list

Calendar view .nk-calendar-view

Gallery view .nk-gallery

🚀 Roadmap

Done📅 12.05.2026

🎨 Design system

In progress📅 20.05.2026

📣 Launch

Planned📅 02.06.2026

＋ New page

Inputs, textarea, select .nk-input

Copy field .nk-copy-field

jsbtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(field.querySelector('.cf-value').textContent);
  btn.classList.add('copied');   // green for a moment
  setTimeout(() => btn.classList.remove('copied'), 1500);
});

Date picker .nk-calendar

Buttons .nk-btn

Switch .nk-switch

Checkbox & radio .nk-check

Slider .nk-slider

Field row .nk-field

Field grid .nk-fields

Profile row & picture .nk-profile-row

AL

Upload image

Change image Remove

Model card .nk-model-card

Danger zone .nk-danger-zone

Member rows .nk-member-row

Settings modal .nk-modal

Popover base .nk-pop

Emoji picker .nk-emoji-grid

Context menu .nk-menu

html<div class="nk-pop nk-menu floating sheet open" style="position:fixed; top:48px; right:12px">…</div>

Command palette .nk-cmdk

Palette: no results .nk-cmdk-empty

Sheet .nk-sheet

Side peek .nk-peek

jsrow.addEventListener('click', () => peek.classList.add('open'));        // a row opens beside the table
closeBtn.addEventListener('click', () => peek.classList.remove('open'));
document.addEventListener('keydown', e => { if (e.key === 'Escape') peek.classList.remove('open'); });
handle.addEventListener('pointermove', e =>                  // .pk-resize, with pointer capture
  document.documentElement.style.setProperty('--nk-peek-width', innerWidth - e.clientX + 'px'));
app.classList.toggle('peek-inset', open);                     // the page moves aside

Dialog .nk-dialog

html<div class="nk-dialog-backdrop open">
  <div class="nk-dialog wide" role="dialog" aria-modal="true" aria-labelledby="t">
    <div class="dl-title" id="t">New view</div>
    <div class="dl-body">
      <div class="nk-field stacked"><div><div class="f-label">Name</div></div><div class="f-control"><input class="nk-input"></div></div>
    </div>
    <div class="dl-actions"><button class="nk-btn secondary">Cancel</button><button class="nk-btn primary">Create</button></div>
  </div>
</div>

Toast .nk-toast

Tooltip .nk-tooltip

Gallery grid .nk-gallery-grid

Panels .nk-panel

🚀

Roadmap

2 min ago

📚

Knowledge base

Yesterday

Weekly review

In progress

Three pages changed, one comment is waiting for an answer.

60 %

Tabs .nk-tabs

Template button .nk-template-btn

Stat cards .nk-stats

Synced block .nk-synced

Segmented control .nk-segmented

Banner .nk-banner

Avatar group .nk-avatar-group

Avatar .nk-avatar

TW AL SL MK AL 🦊 A

Skeleton .nk-skeleton

Empty state .nk-empty

Steps .nk-steps

Comment thread .nk-comments

AI thread .nk-ai-thread

Block host .nk-block-host

This preview is the static shell only — the ＋ / ⠿ rail here does nothing. The working version, with slash menu, drag & drop and block menu, is the live editor in the docs.

Slash menu & bubble toolbar .nk-slash-menu

Static markup for the look. The live, keyboard-driven version runs in the docs editor — type / there.