NotionKit liefert Notions ruhige, dokumentzentrierte Oberfläche als fertiges CSS: Sidebar, Seitenbaum, Callouts, Datenbank-Views, Einstellungen und KI-Fäden. Ein Stylesheet. Kein Build-Step, kein JavaScript, kein Framework-Zwang.
Das Theme steuert data-theme auf <html>. Mehr Einrichtung gibt es nicht.
Unten läuft die Demo — App-Shell, Seitenbaum, Dokument, Datenbank-Views, Befehlspalette, Einstellungs-Modal und KI-Faden. Alles, was zu sehen ist, ist NotionKit-Markup; die Interaktionen sind rund 290 Zeilen schlichtes JavaScript, das zur Demo gehört, nicht zur Library.
NotionKit ist weder ein Mobile-first-Kit, das auf den Desktop gedehnt wurde, noch ein Desktop-Kit, das aufs Handy gequetscht wird. Die Layouts sind fließend, es gibt genau einen Breakpoint bei 860 px, und dasselbe Markup trägt beides. Dieselbe Seite, zwei Viewports:
Ein Stylesheet, kein JavaScript, keine Abhängigkeiten. Läuft mit purem HTML, Flask, Rails, Laravel, Astro, React — mit allem, was Klassennamen ausgibt.
Beide Themes sind bis hin zu Tag-Farben und Schatten durchspezifiziert. Umgeschaltet wird über ein einziges Attribut auf <html>.
Jeder Wert ist eine --nk-*-Custom-Property. Rebranding ist eine Deklaration: --nk-accent. Alles andere wird daraus gemischt.
Keine festen Viewport-Breiten, keine Geräte-Mockups. Fließende Layouts, ein Breakpoint, horizontales Scrollen dort, wo Tabellen und Boards es brauchen.
Liefert ein Constructable Stylesheet, getrennt in Tokens und Komponenten, samt ::slotted()-Zwillingen — damit Web Components es adoptieren können, ohne das Branding zu zerbrechen.
Eine strukturierte SKILL.md gibt Coding-Agenten das exakte Markup, die Verschachtelungsregeln und sechs vollständige App-Skelette.
Rund 100 Komponenten-Klassen in elf Gruppen. Jede ist mit Live-Vorschau und ihrem Mobile-Verhalten dokumentiert.
| Gruppe | Was du bekommst |
|---|---|
| App-Shell & Layout | nk-app, Sidebar mit Workspace-Umschalter und Fußzeile, Hauptspalte, Topbar mit Breadcrumb und Aktionen, Abschnitts-Label |
| Navigation / Seitenbaum | Baum-Einträge mit Aktiv-Zustand und Hover-Aktionen, einklappbare Unterbäume, Toggle-Pfeile, Tastatur-Hinweise |
| Seiten-Shell & Dokument | Scroll-Container, Cover, Seitenspalte, Seiten-Icon, editierbarer Titel, Meta-Zeile, Überschriften, Lead-Absatz |
| Inhalts-Elemente | Callouts, Todos mit Durchstreichung, Toggles, Trenner, Blockzitate, Erwähnungen (Person / Seite / Datum), Inline-Code, Code-Blöcke |
| Datenbank-Views | View-Reiter mit Zählern, scrollbare Tabellen, Tags in vier Farben, Fortschrittsbalken, Board-Spalten und -Karten |
| Formulare & Einstellungen | Inputs, Textareas, Selects mit eigenem Chevron, fünf Button-Varianten, Switches, Checkboxen und Radios, Slider, Feld-Zeilen, Modell-Karten, Gefahrenbereich, Mitglieder-Zeilen |
| Einstellungs-Modal | Backdrop, Modal-Hülle, Einstellungs-Navigation mit Nutzerblock, Inhaltsbereich, umschaltbare Panes |
| Overlays & Menüs | Popover-Basis, Emoji-Picker, Kontextmenüs mit Kürzeln, vollständige Befehlspalette, Toasts |
| Galerie & Produktivität | Galerie-Raster, Reiter, Template-Buttons, Statistik-Karten mit Deltas, Synced-Blöcke, Segment-Auswahl, Banner, Avatar-Gruppen, Skelette, Leerzustände |
| Kollaboration & KI | Kommentar-Fäden, Kommentar-Eingabe, KI-Nachrichtenfaden, Nachrichten-Aktionen, KI-Eingabezeile |
| Editor-Adapter | nk-block-host plus gestylte Überschreibungen für TipTap/ProseMirror, BlockNote und Novel, samt Slash-Menü und Bubble-Toolbar |
Ein Block-Editor — Selektion, Paste, Tastatur, Undo, Mobile — ist ein eigenes Produkt, und ein halber Editor würde die Library in echten Apps beschädigen. NotionKit liefert deshalb .nk-block-host, die optische Hülle, plus eine gestylte Adapter-Schicht für TipTap, BlockNote und Novel. Häng den Editor ein, den du willst; er sieht danach aus wie Teil des Systems.
NotionKit ist die CSS-Grundlage einer dreischichtigen Familie. Die Schichten teilen eine Design-Sprache und einen Namensstamm: aus .nk-callout wird <nk-callout>.
Dieses Projekt. .nk-*-Klassen und --nk-*-Tokens für jeden Stack.
Vanilla-JS-Custom-Elements, die dieses Markup kapseln — gebaut auf dem hier ausgelieferten Constructable Stylesheet.
Ein komplettes Website-Template — Dokumentationen, Wissensdatenbanken, Produktseiten — auf derselben Grundlage.