👤 Marcel Karas📅 Created 12 May 2026🏷️ Design system
A calm UI framework in the Notion idiom – as web components, without a build step. This page is the living preview: sidebar, page tree, callouts, todos, toggles and database views in one shell.
💡
Core idea: NotionKit supplies the look and the shell; the editor is mounted through <nk-block-host> (BlockNote, say), and the data comes from your own API. Three layers, cleanly separated.
✅ Next steps
Sketch the component scope
Build the preview with light/dark
Prioritise the MVP scope
Define the data model for tree & database
🗃️ Project database
▦ Table 4▤ Board＋
📄Name
◉Status
👤Owner
📅Due
▰Progress
＋ New page
🧩 More building blocks
Everything else a Notion-like system needs – calm, drop-in elements. Try them out.
ℹ️ This page is a component preview – every element follows the same design tokens.Open palette
⚠️ The “Project overview” database has 2 overdue entries.View
✓ All changes have been synced.
Inline elements
Running text can link SL Sara Lindt,
pages such as 📄 Knowledge base and dates such as
📅 20 May – and just as easily nk-database as code.
Emoji picker
😀🌿🍕🚀💡❤️🎲
Context menu (⋯)
Page
✏️Rename⌘⇧R
📋Duplicate⌘D
🔗Copy link⌘L
📁Move to …
🗑️Move to trash⌫
Page tabs
📝 Notes✅ Tasks📎 Files
Free-form notes on the project – meeting minutes, ideas, rough drafts.
Tasks for this project, linked to the database below.
Attached files and exports.
Template buttons
Stat cards
Active pages
128
▲ 12 this week
AI requests
847
▲ 23 %
Open tasks
14
▼ 5 since yesterday
Synced block
⟳ 3 places
Our mission: Take real weight off the working day – calm, clear, effective. This text appears identically on three pages and is maintained in one place.
Segmented control
For time ranges, perspectives or density levels.
Avatar group & presence
MKSLTW+2
5 people have access
Loading skeleton
Empty state
🗂️
No entries yet
Create the first entry or import existing data.
Comment thread
SL
Sara Lindt · 1 hr ago
The board view already feels very close to the original. 👍
✨
MonaKI · 20 min ago
I have flagged the overdue entries and prepared a summary.
AI assistant embedding
MK
Du
Summarise the open tasks for this project.
✨
Mona · KI
Two tasks are open: the Table-View sits at 65 % (due 20 May), the Board with drag and drop is planned. I would nail down the MVP scope first.
✨
What does integrating it look like?
One script tag is enough – no bundler, no framework lock-in:
The text editor itself. With <nk-block-host> only the optical shell – BlockNote or Novel is mounted as the editor. That keeps the kit lean and the editor replaceable.
✍️ Editor surface
From here on you are typing into real TipTap, mounted into an nk-block-host – with no editor CSS of its own. Hover a block for ＋ / ⠿, drag it, select text, or type /.
This is no longer a preview: this paragraph is editable. The title above, the callout, the todos and the database are NotionKit markup – and this block is the same look, only alive.
Mount the editor into a block host
Move a block with ⠿
Pick a new block with /
NotionKit supplies the look and the shell, the editor supplies the behaviour. Three layers, cleanly separated.
My profile
MK
Details
Display name
How you appear in the workspace.
E-Mail
Used for invitations and notifications.
About me
A short description for your team.
Appearance
Appearance
Light, dark, or follow the system setting.
Palette
The example palettes from theme-override.css – one line of --nk-accent is enough.
Language
Comfort
Compact view
Reduces spacing in the sidebar and lists.
Reduce motion
Less motion for calmer work.
Text size
100 %
Notifications
By email
Push
Push notifications
Straight in the browser when shared pages see activity.
Mentions only
Everything else lands quietly in the inbox.
AI assistant
AI replies enabled
Mona may read page content and suggest replies.
Model
Mona Standard Recommended
A balanced model for everyday work. Fast, calm, dependable.
Mona Deep
More depth of thought for complex analysis and long documents. Answers more slowly.
Custom model API
Connect your own API key (OpenAI, Anthropic, Azure).
Reply style
API key
Only needed for a custom model. Stays stored locally.
Workspace settings
Workspace name
Domain
Public pages appear under this address.
Public home page
Visitors may view shared pages without signing in.
⚠️ Danger zone
Delete workspace
Irreversibly removes all pages, databases and members.