NotionKit gives you Notion’s quiet, document-centric surface as ready-made CSS: sidebar, page tree, callouts, database views, settings and AI threads. One stylesheet. No build step, no JavaScript, no framework lock-in.
Set the theme with data-theme on <html>. That is the whole setup.
Below is the live demo — app shell, page tree, document, database views, command palette, settings modal and AI thread. Everything you see is NotionKit markup; the interactions are ~290 lines of plain JavaScript that ship with the demo, not with the library.
NotionKit is not a mobile-first kit stretched to the desktop, nor a desktop kit squeezed onto a phone. Layouts are fluid, there is exactly one breakpoint at 860px, and the same markup carries both. Same page, two viewports:
One stylesheet, no JavaScript, no dependencies. Works with plain HTML, Flask, Rails, Laravel, Astro, React — anything that emits class names.
Both themes are fully specified down to tag colours and shadows. Switch with a single attribute on <html>.
Every value is a --nk-* custom property. Re-branding is one declaration: --nk-accent. Everything else is mixed from it.
No fixed viewport widths, no device mockups. Fluid layouts, one breakpoint, horizontal scrolling where tables and boards need it.
Ships a constructable stylesheet split into tokens and components, plus ::slotted() twins — so web components can adopt it without breaking branding.
A structured SKILL.md gives coding agents the exact markup, nesting rules and six full app skeletons.
About 100 component classes across eleven groups. Every one of them is documented with a live preview and its mobile behaviour.
| Group | What you get |
|---|---|
| App shell & layout | nk-app, sidebar with workspace switcher and footer, main column, topbar with breadcrumb and actions, section labels |
| Navigation / page tree | Tree items with active state and hover actions, collapsible children, toggle arrows, keyboard hints |
| Page shell & document | Scroll container, cover, page column, page icon, editable title, meta row, headings, lead paragraph |
| Content elements | Callouts, todos with strike-through, toggles, dividers, block quotes, mentions (person / page / date), inline code, code blocks |
| Database views | View tabs with counts, scrollable tables, tags in four colours, progress bars, board columns and cards |
| Forms & settings | Inputs, textareas, selects with custom chevron, five button variants, switches, checkboxes and radios, sliders, field rows, model cards, danger zone, member rows |
| Settings modal | Backdrop, modal shell, settings nav with user block, content area, switchable panes |
| Overlays & menus | Popover base, emoji picker, context menus with shortcuts, full command palette, toasts |
| Gallery & productivity | Gallery grid, tabs, template buttons, stat cards with deltas, synced blocks, segmented control, banners, avatar groups, skeletons, empty states |
| Collaboration & AI | Comment threads, comment input, AI message thread, message actions, AI input row |
| Editor adapter | nk-block-host plus themed overrides for TipTap/ProseMirror, BlockNote and Novel, with slash menu and bubble toolbar |
A block editor — selection, paste, keyboard, undo, mobile — is its own product, and half an editor would damage the library in real apps. So NotionKit ships .nk-block-host, the optical shell, plus a themed adapter layer for TipTap, BlockNote and Novel. Mount the editor you want; it comes out looking like part of the system.
NotionKit is the CSS foundation of a three-layer family. The layers share one design language and one naming stem: .nk-callout becomes <nk-callout>.
This project. .nk-* classes and --nk-* tokens for any stack.
Vanilla-JS custom elements that wrap this markup, built on the constructable stylesheet shipped here.
A full website template — documentation, knowledge bases, product pages — on the same foundation.