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, ein Dokument mit seinen Eigenschaften, Datenbank-Views, Befehlspalette, Einstellungs-Modal und KI-Faden; „Start“ in der Sidebar öffnet die Start-Ansicht. Alles, was zu sehen ist, ist NotionKit-Markup; die Interaktionen sind rund 380 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, eine Datenbankzeile im Side Peek geöffnet: am Desktop ein Panel neben der Tabelle, auf dem Telefon ein Sheet – ein Markup, zwei Darstellungen.
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 acht vollständige App-Skelette.
Rund 140 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 – auf dem Telefon eine Schublade hinter ☰ –, Hauptspalte, Topbar mit Breadcrumb und Aktionen, Tab-Leiste, 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 mit Verlauf oder Bild, Seitenspalte mit Notions Seitenoptionen volle Breite und kleiner Text, Seiten-Icon, editierbarer Titel, Seiteneigenschaften, Meta-Zeile, Überschriften, Lead-Absatz |
| Inhalts-Elemente | Callouts, Todos mit Durchstreichung, Toggles, Trenner, Blockzitate, Erwähnungen (Person / Seite / Datum), Inline-Code, Code-Blöcke, Prosa für gerendertes Markdown, die sich auf den Pixel mit dem Editor deckt |
| Datenbank-Views | View-Reiter mit Zählern, eine Werkzeugleiste mit Filter, Sortieren, Suche und Neu, Filter-Pills, scrollbare Tabellen mit rechtsbündigen Zahlen, Listen-Ansicht, Tags in neun Farben, Fortschrittsbalken in der Zelle oder in voller Breite, 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, die einblenden und auf dem Telefon zum Sheet werden, Bottom Sheets, vollständige Befehlspalette, Toasts |
| Galerie & Produktivität | Galerie-Raster, Panels, Schritte, Reiter, Template-Buttons, Statistik-Karten mit Deltas, Synced-Blöcke, Segment-Auswahl, Banner, Avatare in vier Größen und neun Farben, Avatar-Gruppen, Skelette, Leerzustände |
| Kollaboration & KI | Kommentar-Fäden, Kommentar-Eingabe, KI-Nachrichtenfaden mit der grauen Chat-Blase, 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.
88 Vanilla-JS-Custom-Elements, die dieses Markup kapseln — Shadow DOM, native Formularteilnahme, Pixelgleichheit mit dem Klassen-Markup. Gebaut auf dem hier ausgelieferten Constructable Stylesheet.