App shell & layout

PRD 5.1

App shell `.nk-app`

Product roadmap

A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.

Workspace switcher `.nk-workspace`

A

Acme Inc⌄

Topbar `.nk-topbar`

Section label `.nk-section-label`

Favourites＋

📊Project overview

Navigation / page tree

PRD 5.2

Tree item `.nk-tree-item`

📊Project overview＋⋯

📚Knowledge base＋⋯

🎨Design system＋⋯

Nested tree & toggle arrow `.nk-tree-children`

▶📚Knowledge base

📄Meeting notes

🎨Design system

▶🗂️Pages

—

Keyboard hint `.nk-kbd`

🔍Search⌘K

Page shell & document

PRD 5.3

Page column `.nk-page`

🚀

Product roadmap

👤 Ada Lovelace📅 Created 12 May 2026

A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.

Cover `.nk-cover`

Headings & lead `.nk-heading`

✅ How this works

A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.

Content elements

PRD 5.4

Callout `.nk-callout`

💡

Core idea: a callout carries one thought that should not be missed. Keep it to a sentence or two.

To-do `.nk-todo`

Sketch the component scope Build the preview Prioritise the MVP

Toggle `.nk-toggle`

What is not included?

The text editor itself. NotionKit ships the optical shell; you mount TipTap, BlockNote or Novel inside it.

Quote & divider `.nk-quote`

Design is not just what it looks like. Design is how it works.— Steve Jobs

Inline mentions `.nk-mention`

SLSara Lindt 📄 Knowledge base 📅 20 May

Code `.nk-code`

html<div class="nk-callout"> <span class="c-icon">💡</span> </div>

Inline: --nk-accent

Database views

PRD 5.5

View tabs `.nk-db-tabs`

▦ Table4

▤ Board

🖼 Gallery

Table view `.nk-table`

📄Name	◉Status	👤Owner	📅Due	📊Progress
🚀 Roadmap	Done	SLSara	12.05.2026	100 %
🎨 Design system	In progress	TWTom	20.05.2026	65 %

＋＋ New page

Tags `.nk-tag`

In progress Done Planned Design system

Progress bar `.nk-progress`

65 %

20 %

Board view `.nk-board`

Planned1

🖥 Board view

TW28.05.

In progress1

🎨 Design system

Done1

🚀 Roadmap

12.05.

Forms & settings

PRD 5.6

Inputs, textarea, select `.nk-input`

Buttons `.nk-btn`

Switch `.nk-switch`

Compact view

Reduces spacing in the sidebar and lists.

Reduce motion

Checkbox & radio `.nk-check`

Light Dark

Light System

Slider `.nk-slider`

Text size: 100 %

Field row `.nk-field`

Display name

How you appear in the workspace.

Email

Profile row `.nk-profile-row`

AL

Model card `.nk-model-card`

Mona StandardRecommended

A balanced model for everyday work. Fast, calm, dependable.

Mona Deep

A balanced model for everyday work. Fast, calm, dependable.

Danger zone `.nk-danger-zone`

⚠️ Danger zone

Delete

Irreversibly removes all pages, databases and members.

Member rows `.nk-member-row`

AL

Ada Lovelace

ada@acme.com

TW

Tom Weber

tom@acme.com

Settings modal

PRD 5.7

Overlays & menus

PRD 5.8

Popover base `.nk-pop`

Emoji picker `.nk-emoji-grid`

🚀📊💡✅🎨📚🗂️🔍📥⚙️🧩🌙☀️📅👤💬

🕐😀🐶🍎⚽🚗💡

Command palette `.nk-cmdk`

🔍

Pages

📊Project overview

📚Knowledge base

Actions

＋New page⌘N

⚙️Open settings⌘,

Palette: no results `.nk-cmdk-empty`

🔍

No results for “xyzzy”

Toast `.nk-toast`

✓ Settings saved

Gallery & productivity

PRD 5.9

Gallery grid `.nk-gallery-grid`

Active pages

this week

128

Open tasks

this week

17

Tabs `.nk-tabs`

📝 Notes

✅ Tasks

📎 Files

Panel content follows the tab strip and inherits the calm body type.

Template button `.nk-template-btn`

Stat cards `.nk-stats`

Active pages

128

▲ 12 this week

AI requests

1 204

▲ 8 %

Open tasks

17

▼ 5 since yesterday

Synced block `.nk-synced`

⟳ 3 places This text appears identically on three pages and is maintained in one place.

Segmented control `.nk-segmented`

Banner `.nk-banner`

Avatar group `.nk-avatar-group`

AL TW SL +2

5 people have access

Skeleton `.nk-skeleton`

Empty state `.nk-empty`

🗂️

No entries yet

Create the first entry or import existing data.

Collaboration & AI

PRD 5.10

Comment thread `.nk-comments`

SL

Sara Lindt · 1 hr ago

The board view already feels very close to the original. 👍

AI thread `.nk-ai-thread`

AL

You

Summarise the open tasks for this project.

🤖

Mona · AI

Two tasks are open: the table view sits at 65 %, the board with drag and drop is planned.

Editor adapter

PRD 5.11

Block host `.nk-block-host`

Core idea: a callout carries one thought that should not be missed. Keep it to a sentence or two.

⠿

Type “/” for commands …

This preview is the static shell only — the ＋ / ⠿ rail here does nothing. The working version, with slash menu, drag & drop and block menu, is the live editor in the docs.

App shell & layout

App shell .nk-app

Product roadmap

Workspace switcher .nk-workspace

Topbar .nk-topbar

Breadcrumb .nk-breadcrumb

Section label .nk-section-label

Navigation / page tree

Tree item .nk-tree-item

Nested tree & toggle arrow .nk-tree-children

Keyboard hint .nk-kbd

Page shell & document

Page column .nk-page

Product roadmap

Cover .nk-cover

Headings & lead .nk-heading

✅ How this works

Content elements

Callout .nk-callout

To-do .nk-todo

Toggle .nk-toggle

Quote & divider .nk-quote

Inline mentions .nk-mention

Code .nk-code

Database views

View tabs .nk-db-tabs

Table view .nk-table

Tags .nk-tag

Progress bar .nk-progress

Board view .nk-board

Forms & settings

Inputs, textarea, select .nk-input

Buttons .nk-btn

Switch .nk-switch

Checkbox & radio .nk-check

Slider .nk-slider

Field row .nk-field

Profile row .nk-profile-row

Model card .nk-model-card

Danger zone .nk-danger-zone

Member rows .nk-member-row

Settings modal

Settings modal .nk-modal

Display name

Overlays & menus

Popover base .nk-pop

Emoji picker .nk-emoji-grid

Context menu .nk-menu

Command palette .nk-cmdk

Palette: no results .nk-cmdk-empty

Toast .nk-toast

Gallery & productivity

Gallery grid .nk-gallery-grid

Active pages

Open tasks

Tabs .nk-tabs

Template button .nk-template-btn

Stat cards .nk-stats

Synced block .nk-synced

Segmented control .nk-segmented

Banner .nk-banner

Avatar group .nk-avatar-group

Skeleton .nk-skeleton

Empty state .nk-empty

Collaboration & AI

Comment thread .nk-comments

AI thread .nk-ai-thread

Editor adapter

Block host .nk-block-host

Slash menu & bubble toolbar .nk-slash-menu

App shell `.nk-app`

Workspace switcher `.nk-workspace`

Topbar `.nk-topbar`

Breadcrumb `.nk-breadcrumb`

Section label `.nk-section-label`

Tree item `.nk-tree-item`

Nested tree & toggle arrow `.nk-tree-children`

Keyboard hint `.nk-kbd`

Page column `.nk-page`

Cover `.nk-cover`

Headings & lead `.nk-heading`

Callout `.nk-callout`

To-do `.nk-todo`

Toggle `.nk-toggle`

Quote & divider `.nk-quote`

Inline mentions `.nk-mention`

Code `.nk-code`

View tabs `.nk-db-tabs`

Table view `.nk-table`

Tags `.nk-tag`

Progress bar `.nk-progress`

Board view `.nk-board`

Inputs, textarea, select `.nk-input`

Buttons `.nk-btn`

Switch `.nk-switch`

Checkbox & radio `.nk-check`

Slider `.nk-slider`

Field row `.nk-field`

Profile row `.nk-profile-row`

Model card `.nk-model-card`

Danger zone `.nk-danger-zone`

Member rows `.nk-member-row`

Settings modal `.nk-modal`

Popover base `.nk-pop`

Emoji picker `.nk-emoji-grid`

Context menu `.nk-menu`

Command palette `.nk-cmdk`

Palette: no results `.nk-cmdk-empty`

Toast `.nk-toast`

Gallery grid `.nk-gallery-grid`

Tabs `.nk-tabs`

Template button `.nk-template-btn`

Stat cards `.nk-stats`

Synced block `.nk-synced`

Segmented control `.nk-segmented`

Banner `.nk-banner`

Avatar group `.nk-avatar-group`

Skeleton `.nk-skeleton`

Empty state `.nk-empty`

Comment thread `.nk-comments`

AI thread `.nk-ai-thread`

Block host `.nk-block-host`

Slash menu & bubble toolbar `.nk-slash-menu`