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');                // das ☰ in der Topbar holt sie zurück
});

Workspace-Umschalter .nk-workspace

Topbar .nk-topbar

Tab-Bar (mobil) .nk-tab-bar

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

Breadcrumb .nk-breadcrumb

Abschnitts-Label .nk-section-label

Baum-Eintrag .nk-tree-item

Unterbaum & Toggle-Pfeil .nk-tree-children

Tastatur-Hinweis .nk-kbd

Seitenspalte & Seitenoptionen .nk-page

Seiteneigenschaften .nk-props

Cover .nk-cover

Überschriften & Lead .nk-heading

Callout .nk-callout

Bookmark .nk-bookmark

NotionKit – der ruhige Workspace-Look als CSS NotionKit ist eine reine CSS-Komponentenbibliothek im Notion-Look: Sidebar, Seitenbaum, Dokument-Shell, Datenbank-Views, Einstellungen und KI-Flächen. https://notionkit.jungherz.com

To-do .nk-todo

Toggle .nk-toggle

Zitat & Trenner .nk-quote

Inline-Erwähnungen .nk-mention

Code .nk-code

Prosa .nk-prose

Bewusst nur als Klasse: ::slotted() erreicht den geslotteten Knoten, nie einen Absatz darin, ein <nk-prose>-Element könnte seinen Inhalt also nicht stylen. Die Klasse gehört an einen Container im Light DOM, auch in NotionKit Elements.

View-Reiter .nk-db-tabs

Werkzeugleiste & Filter-Pills .nk-db-toolbar

Tabellen-Ansicht .nk-table

Tags .nk-tag

Fortschrittsbalken .nk-progress

Board-Ansicht .nk-board

Listen-Ansicht .nk-list

Kalender-Ansicht .nk-calendar-view

Galerie-Ansicht .nk-gallery

🚀 Roadmap

Fertig📅 12.05.2026

🎨 Design-System

In Arbeit📅 20.05.2026

📣 Launch

Geplant📅 02.06.2026

＋ Neue Seite

Inputs, Textarea, Select .nk-input

Kopierfeld .nk-copy-field

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

Datumsauswahl .nk-calendar

Buttons .nk-btn

Switch .nk-switch

Checkbox & Radio .nk-check

Slider .nk-slider

Feld-Zeile .nk-field

Feldraster .nk-fields

Profil-Zeile & Bild .nk-profile-row

AL

Bild hochladen

Bild ändern Entfernen

Modell-Karte .nk-model-card

Gefahrenbereich .nk-danger-zone

Mitglieder-Zeilen .nk-member-row

Einstellungs-Modal .nk-modal

Popover-Basis .nk-pop

Emoji-Picker .nk-emoji-grid

Kontextmenü .nk-menu

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

Befehlspalette .nk-cmdk

Palette: keine Treffer .nk-cmdk-empty

Sheet .nk-sheet

Side Peek .nk-peek

jsrow.addEventListener('click', () => peek.classList.add('open'));        // eine Zeile öffnet sich neben der Tabelle
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">Neue Ansicht</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">Abbrechen</button><button class="nk-btn primary">Erstellen</button></div>
  </div>
</div>

Toast .nk-toast

Tooltip .nk-tooltip

Galerie-Raster .nk-gallery-grid

Panels .nk-panel

🚀

Roadmap

vor 2 Min.

📚

Wissensdatenbank

Gestern

Wochenrückblick

In Arbeit

Drei Seiten haben sich geändert, ein Kommentar wartet auf Antwort.

60 %

Reiter .nk-tabs

Template-Button .nk-template-btn

Statistik-Karten .nk-stats

Synced-Block .nk-synced

Segment-Auswahl .nk-segmented

Banner .nk-banner

Avatar-Gruppe .nk-avatar-group

Avatar .nk-avatar

TW AL SL MK AL 🦊 A

Skelett .nk-skeleton

Leerzustand .nk-empty

Schritte .nk-steps

Kommentar-Faden .nk-comments

KI-Faden .nk-ai-thread

Block-Host .nk-block-host

Diese Vorschau ist nur die statische Hülle – die ＋ / ⠿-Leiste hier tut nichts. Die funktionierende Fassung mit Slash-Menü, Drag & Drop und Blockmenü ist der Live-Editor in der Doku.

Slash-Menü & Bubble-Toolbar .nk-slash-menu

Statisches Markup für die Optik. Die lebende, tastaturgesteuerte Fassung läuft im Doku-Editor – dort / tippen.