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, a document with its properties, database views, command palette, settings modal and AI thread; “Home” in the sidebar opens the start view. Everything you see is NotionKit markup; the interactions are ~380 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, a database row open in the side peek: a panel beside the table on the desktop, a sheet on the phone – one markup, two presentations.
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 eight full app skeletons.
About 140 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 – a drawer behind ☰ on phones –, main column, topbar with breadcrumb and actions, tab bar, 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 with gradient or picture, page column with Notion’s page options full width and small text, page icon, editable title, page properties, meta row, headings, lead paragraph |
| Content elements | Callouts, todos with strike-through, toggles, dividers, block quotes, mentions (person / page / date), inline code, code blocks, prose for rendered Markdown that matches the editor to the pixel |
| Database views | View tabs with counts, a toolbar with Filter, Sort, search and New, filter pills, scrollable tables with right-aligned numbers, list view, tags in nine colours, progress bars in a cell or full width, 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 that float in and become sheets on a phone, bottom sheets, full command palette, toasts |
| Gallery & productivity | Gallery grid, panels, steps, tabs, template buttons, stat cards with deltas, synced blocks, segmented control, banners, avatars in four sizes and nine colours, avatar groups, skeletons, empty states |
| Collaboration & AI | Comment threads, comment input, AI message thread with the grey chat bubble, 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.
88 vanilla-JS custom elements that wrap this markup — Shadow DOM, native form participation, pixel parity with the class markup. Built on the constructable stylesheet shipped here.