Showcase v1.21.0

Jedes Element, live, in beiden Themes. Der Branding-Schalter färbt die ganze Seite über eine einzige :root-Deklaration um – kein Element bleibt halb gebrandet.

Formulare & Controls

Welle 1

<nk-btn>

Speichern Abbrechen Löschen

<nk-select>

<nk-switch>

GeplantIn Arbeit

<nk-check>

Alle Wöchentliche Zusammenfassung Nur Erwähnungen

<nk-radio>

Knapp Ausgewogen Ausführlich

<nk-fields>

Inhalts-Elemente

Welle 1

<nk-tag>

Nicht begonnen Archiv Geplant Review Erledigt In Arbeit Design Idee Blockiert

<nk-progress>

Fortschritt

<nk-callout>

Core idea: Ein Callout trägt einen Gedanken, der nicht untergehen darf.

<nk-heading>

Abschnittsüberschrift

<nk-toggle>

Hier steht der eingeklappte Inhalt.

<nk-todo>

Doku schreiben Ausliefern

<nk-code>

<nk-btn variant="primary">Speichern</nk-btn>

<nk-quote>

Die beste Oberfläche ist die, die aus dem Weg geht.

App-Gerüst & Navigation

Welle 2

<nk-section-label>

FavoritenProjektübersicht

<nk-tree>

Favoriten Projektübersicht NotionKit MVP Voice-Office-Hub Wissensbasis Onboarding Designsystem

<nk-tree-item>

Suche⌘K Projektübersicht Designsystem

<nk-topbar>

📊 Projektübersicht🚀 NotionKit MVP Zuletzt bearbeitet vor 2 Min. Teilen ⭐

<nk-tab-bar>

Start Eingang Suche Einstellungen Mehr

<nk-tab-bar-item>

StartEingang

Seiten-Shell & Bausteine

Welle 3

<nk-page>

<nk-page-cover>

<nk-page-title>

NotionKit MVP

<nk-page-actions>

👤 Marcel Karas📅 Erstellt am 12. Mai 2026🏷️ Designsystem

<nk-props>

In Arbeit ALAda Lovelace 2. Juni 2026 DesignsystemCSS

<nk-prop>

2. Juni 2026support+design@notionkit.example.com · Bestätigt

<nk-panels>

vor 2 Min.

Gestern

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

<nk-panel>

vor 2 Min.

 In Arbeit

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

<nk-block-host>

Hier steht Block-Inhalt – klicken zum Fokussieren.

<nk-banner>

ℹ️ Diese Seite ist eine Komponenten-Vorschau – jedes Element folgt denselben Design-Tokens. ⚠️ Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge. ✓ Alle Änderungen wurden synchronisiert. ⛔ Die Verbindung zu Notion ist abgerissen.

<nk-empty>

＋ Neuer EintragImportieren

<nk-synced>

Unsere Mission: Dem Arbeitstag echtes Gewicht nehmen – ruhig, klar, wirksam.

<nk-tabs>

📝 Notizen ✅ Aufgaben 📎 Dateien
Freie Notizen zum Projekt – Protokolle, Ideen, Entwürfe.
Aufgaben zu diesem Projekt, verknüpft mit der Datenbank.
Angehängte Dateien und Exporte.

<nk-tab>

📝 Notizen✅ Aufgaben

<nk-segmented>

<nk-steps>

<nk-avatar-group>

MKSLTW5 Personen haben Zugriff

<nk-avatar>

TWALSLMKA

<nk-mention>

SLSara Lindt · 📄 Onboarding · 📅 20. Mai

<nk-template-btn>

Wochenplan einfügen Meeting-Protokoll einfügen Retro-Board einfügen

<nk-profile-row>

Foto ändern Entfernen

<nk-member-list>

Overlays

Welle 4

<nk-menu>

Seite Umbenennen Duplizieren Verschieben nach … Löschen

<nk-menu-item>

UmbenennenKleiner Text

<nk-pop>

Optionen ▾ UmbenennenDuplizierenLöschen

<nk-tooltip>

⋯ ⭐ ☰
Seitenleiste öffnen

Daten & Kollaboration

Welle 5

<nk-database>

Filter Sortieren Neu

<nk-table-view>

<nk-board-view>

<nk-list-view>

<nk-calendar-view>

<nk-filter-bar>

<nk-comments>

Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍 AIIch habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet.

<nk-comment>

Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍

<nk-ai-thread>

Fasse die offenen Aufgaben dieses Projekts zusammen. Zwei Aufgaben sind offen: die Tabellenansicht steht bei 65 % (fällig 20. Mai), das Board mit Drag-and-Drop ist geplant.

<nk-ai-msg>

Was ist auf dieser Seite noch offen?Zwei Aufgaben sind offen: die Tabellenansicht steht bei 65 % (fällig 20. Mai), das Board mit Drag-and-Drop ist geplant.
NotionKit Elements v1.21.0 · wrapping NotionKit CSS v1.21.0 · MIT · Jungherz GmbH