Repository navigation
Expand file tree
/
Copy pathdocs.html
More file actions
2746 lines (2555 loc) · 412 KB
/
Copy pathdocs.html
File metadata and controls
2746 lines (2555 loc) · 412 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NotionKit Docs – components, tokens and integration</title>
<meta name="description" content="The full NotionKit reference: live previews, copy-paste markup, design tokens for both themes, state classes, mobile behaviour and editor integration recipes.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://notionkit.jungherz.com/docs.html">
<link rel="alternate" hreflang="en" href="https://notionkit.jungherz.com/docs.html">
<link rel="alternate" hreflang="de" href="https://notionkit.jungherz.com/de/docs.html">
<link rel="alternate" hreflang="x-default" href="https://notionkit.jungherz.com/docs.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="NotionKit">
<meta property="og:title" content="NotionKit Docs – components, tokens and integration">
<meta property="og:description" content="The full NotionKit reference: live previews, copy-paste markup, design tokens for both themes, state classes, mobile behaviour and editor integration recipes.">
<meta property="og:url" content="https://notionkit.jungherz.com/docs.html">
<meta property="og:image" content="https://notionkit.jungherz.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="de_DE">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="NotionKit Docs – components, tokens and integration">
<meta name="twitter:description" content="The full NotionKit reference: live previews, copy-paste markup, design tokens for both themes, state classes, mobile behaviour and editor integration recipes.">
<meta name="twitter:image" content="https://notionkit.jungherz.com/og.png">
<meta name="theme-color" content="#f7f6f3" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="notionkit.css">
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.site-nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 14px;
padding: 0 clamp(16px, 4vw, 40px); height: 56px;
background: color-mix(in srgb, var(--nk-bg) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--nk-border);
}
.site-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; text-decoration: none; font-size: 15px; }
.site-brand .mark {
width: 24px; height: 24px; border-radius: 6px; font-size: 13px;
background: linear-gradient(135deg, var(--nk-decor-purple), var(--nk-decor-blue));
color: var(--nk-on-accent); display: flex; align-items: center; justify-content: center;
}
.site-version { font-size: 11px; color: var(--nk-text-tertiary); border: 1px solid var(--nk-border); border-radius: 10px; padding: 1px 7px; font-weight: 400; }
.site-nav-links { display: flex; gap: 2px; margin-left: 18px; }
.site-nav-links a {
padding: 5px 10px; border-radius: var(--nk-radius); text-decoration: none;
color: var(--nk-text-secondary); font-size: 13.5px;
}
.site-nav-links a:hover { background: var(--nk-bg-hover); color: var(--nk-text); }
.site-nav-links a.current { color: var(--nk-text); font-weight: 500; }
.site-nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
#paletteMenu .nk-menu-item.selected { background: var(--nk-bg-active); font-weight: 500; }
.site-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.site-section { padding: clamp(48px, 8vw, 96px) 0; }
.site-section + .site-section { border-top: 1px solid var(--nk-border); }
.site-h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; }
.site-lead { font-size: 16px; line-height: 1.65; color: var(--nk-text-secondary); max-width: 68ch; margin: 0 0 28px; }
.site-kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nk-text-tertiary); margin-bottom: 14px; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.site-card { border: 1px solid var(--nk-border); border-radius: 10px; padding: 20px 22px; background: var(--nk-bg-card); }
.site-card h3 { font-size: 15px; font-weight: 600; margin: 10px 0 6px; }
.site-card p { font-size: 13.5px; line-height: 1.6; color: var(--nk-text-secondary); margin: 0; }
.site-card .ico { font-size: 22px; }
.site-frame {
border: 1px solid var(--nk-border-strong); border-radius: 10px; overflow: hidden;
background: var(--nk-bg); box-shadow: var(--nk-shadow-menu);
}
.site-frame-bar {
display: flex; align-items: center; gap: 7px; padding: 8px 12px;
border-bottom: 1px solid var(--nk-border); background: var(--nk-bg-sidebar);
}
.site-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--nk-border-strong); }
.site-frame-bar span { margin-left: 6px; font-size: 11.5px; color: var(--nk-text-tertiary); }
.site-frame iframe { display: block; width: 100%; border: 0; background: var(--nk-bg); }
.site-viewports { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.site-viewport { flex: 1 1 420px; min-width: 0; }
.site-viewport.mobile { flex: 0 1 242px; }
.site-viewport-label { font-size: 12px; color: var(--nk-text-tertiary); margin-bottom: 8px; }
/* The scaler shows a real viewport width shrunk to fit, so the layout the
iframe computes is the one that width would really produce. The frame
takes the width it gets and scales the iframe by frame / viewport width:
tan(atan2(a, b)) is a / b as a plain number, the one way CSS divides two
lengths. A fixed 640px frame used to push the page to 656px on a phone. */
.site-scaler { box-sizing: content-box; container-type: inline-size; overflow: hidden; border-radius: 10px; border: 1px solid var(--nk-border-strong); }
.site-scaler iframe { display: block; border: 0; transform-origin: top left; transform: scale(tan(atan2(100cqw, var(--site-w)))); }
.site-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.site-table th {
text-align: left; font-weight: 500; color: var(--nk-text-tertiary); font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px 8px 0;
border-bottom: 1px solid var(--nk-border);
}
.site-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--nk-border); vertical-align: top; line-height: 1.55; }
.site-table td:first-child { font-weight: 500; white-space: nowrap; }
.site-table td:last-child { color: var(--nk-text-secondary); }
.site-foot {
border-top: 1px solid var(--nk-border); padding: 32px 0 48px;
font-size: 13px; color: var(--nk-text-tertiary);
display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.site-foot a { color: var(--nk-text-secondary); }
@media (max-width: 860px) {
/* Phones: the page links move into a second row that scrolls sideways,
brand and switches keep the first – every page stays one tap away. */
.site-nav { flex-wrap: wrap; height: auto; padding-top: 8px; row-gap: 2px; }
.site-nav-links { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 0 clamp(16px, 4vw, 40px) 6px; overflow-x: auto; scrollbar-width: none; }
.site-nav-links::-webkit-scrollbar { display: none; }
.site-nav-links a { flex-shrink: 0; }
.site-viewports { gap: 32px; }
}
.doc-layout { display: flex; align-items: flex-start; gap: 40px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }
.doc-toc { position: sticky; top: 72px; width: 220px; flex-shrink: 0; max-height: calc(100vh - 92px); overflow-y: auto; padding: 24px 0; }
.doc-toc .nk-section-label { padding-left: 8px; }
.doc-toc a { display: block; padding: 3px 10px; border-radius: var(--nk-radius); color: var(--nk-text-secondary); text-decoration: none; font-size: 13px; line-height: 1.5; }
.doc-toc a:hover { background: var(--nk-bg-hover); color: var(--nk-text); }
.doc-toc a.current { background: var(--nk-bg-active); color: var(--nk-text); font-weight: 500; }
.doc-main { flex: 1; min-width: 0; padding: 24px 0 0; }
.doc-main > header { padding-bottom: 8px; }
.doc-main h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.doc-group { padding-top: 40px; }
.doc-group > h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; scroll-margin-top: 76px; }
.doc-group > .prd { font-size: 12px; color: var(--nk-text-tertiary); margin-bottom: 8px; }
.doc-entry { padding: 26px 0; border-top: 1px solid var(--nk-border); scroll-margin-top: 76px; }
.doc-entry > h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.doc-entry > h3 code { font-size: 12.5px; font-weight: 400; color: var(--nk-text-tertiary); font-family: var(--nk-font-mono); }
.doc-desc { font-size: 14px; line-height: 1.65; color: var(--nk-text-secondary); margin: 0 0 14px; max-width: 72ch; }
.doc-desc code, .doc-note code, .doc-meta code { font-family: var(--nk-font-mono); font-size: 85%; background: var(--nk-bg-callout); border-radius: 4px; padding: 1px 5px; }
.doc-preview { border: 1px solid var(--nk-border); border-radius: 10px; padding: 24px; background: var(--nk-bg); margin: 0 0 12px; }
.doc-preview.is-frame { padding: 0; overflow: hidden; }
.doc-preview.on-sidebar { background: var(--nk-bg-sidebar); }
.doc-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: var(--nk-text-secondary); margin-top: 12px; line-height: 1.6; }
.doc-meta b { color: var(--nk-text); font-weight: 500; flex-shrink: 0; }
.doc-classes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.doc-classes code { font-family: var(--nk-font-mono); font-size: 11.5px; background: var(--nk-bg-callout); border-radius: 4px; padding: 1px 6px; color: var(--nk-text-secondary); }
.doc-note { font-size: 13.5px; line-height: 1.65; color: var(--nk-text-secondary); max-width: 72ch; }
.doc-note--preview { margin: -2px 0 12px; font-size: 12.5px; color: var(--nk-text-tertiary); }
.doc-note--preview a { color: var(--nk-text-secondary); }
.doc-section { padding: 44px 0 8px; border-top: 1px solid var(--nk-border); scroll-margin-top: 76px; }
/* The nav takes two rows on a phone (chrome.mjs), so anchors land lower. */
@media (max-width: 860px) { .doc-group > h2, .doc-entry, .doc-section { scroll-margin-top: 92px; } }
.doc-section:first-of-type { border-top: 0; }
.doc-section > h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.doc-section > h3 { font-size: 15px; font-weight: 600; margin: 26px 0 8px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0; }
.doc-table th { text-align: left; font-weight: 500; color: var(--nk-text-tertiary); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--nk-border); }
.doc-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--nk-border); vertical-align: top; line-height: 1.55; }
.doc-table td code { font-family: var(--nk-font-mono); font-size: 11.5px; }
.doc-table .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--nk-border-strong); vertical-align: -2px; margin-right: 6px; }
.doc-table-wrap { overflow-x: auto; }
.pass { color: var(--nk-tag-green-text); } .warn { color: var(--nk-tag-orange-text); }
@media (max-width: 860px) {
.doc-toc { display: none; }
.doc-layout { gap: 0; }
}
</style>
</head>
<body class="nk-body">
<nav class="site-nav">
<a class="site-brand" href="index.html"><span class="mark">N</span>NotionKit <span class="site-version">v1.20.0</span></a>
<div class="site-nav-links">
<a href="index.html">Start</a>
<a href="docs.html" class="current">Docs</a>
<a href="showcase.html">Showcase</a>
<a href="app.html">Demo</a>
</div>
<div class="site-nav-right">
<a class="nk-topbar-btn" href="de/docs.html" title="Deutsche Version">DE</a>
<a class="nk-topbar-btn" href="https://github.com/JUNGHERZ/NotionKit" title="GitHub">↗ GitHub</a>
<span style="position:relative">
<button class="nk-topbar-btn nk-theme-toggle" id="paletteToggle" title="Palette">🎨</button>
<div class="nk-pop nk-menu" id="paletteMenu" hidden style="position:absolute;right:0;top:34px;width:210px;z-index:60">
<div class="nk-menu-label">Palette · theme-override.css</div>
<div class="nk-menu-item" data-palette="default"><span class="m-icon" style="display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--nk-accent);border:1px solid var(--nk-border-strong)"></span>Default</div>
<div class="nk-menu-item" data-palette="forest"><span class="m-icon" style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#2f8f5b;border:1px solid var(--nk-border-strong)"></span>Forest</div>
<div class="nk-menu-item" data-palette="slate"><span class="m-icon" style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#4b6b8a;border:1px solid var(--nk-border-strong)"></span>Slate</div>
<div class="nk-menu-item" data-palette="sunset"><span class="m-icon" style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#d9730d;border:1px solid var(--nk-border-strong)"></span>Sunset</div>
<div class="nk-menu-item" data-palette="high-contrast"><span class="m-icon" style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#1e72c6;border:1px solid var(--nk-border-strong)"></span>High contrast</div>
</div>
</span>
<button class="nk-topbar-btn nk-theme-toggle" id="themeToggle" title="Toggle light / dark">🌙</button>
</div>
</nav>
<div class="doc-layout">
<aside class="doc-toc">
<div class="nk-section-label">Sections</div>
<a href="#install">Installation</a>
<a href="#tokens">Design tokens</a>
<a href="#theming">Theming</a>
<a href="#states">State classes</a>
<a href="#contrast">Contrast</a>
<a href="#editor">Editor integration</a>
<a href="#shadow">Web components</a>
<div class="nk-section-label">Components</div>
<a href="#shell">App shell & layout</a>
<a href="#nav">Navigation / page tree</a>
<a href="#page">Page shell & document</a>
<a href="#content">Content elements</a>
<a href="#database">Database views</a>
<a href="#forms">Forms & settings</a>
<a href="#modal">Settings modal</a>
<a href="#overlay">Overlays & menus</a>
<a href="#gallery">Gallery & productivity</a>
<a href="#collab">Collaboration & AI</a>
<a href="#editor">Editor adapter</a>
</aside>
<main class="doc-main">
<header>
<h1>Documentation</h1>
<p class="doc-desc" style="font-size:15px">Every component with a live preview, the markup to copy, the classes involved and what it does on a small screen. Nothing here is generated from a screenshot — the previews are the real thing.</p>
</header>
<section class="doc-section" id="install">
<h2>Installation</h2>
<p class="doc-note">One stylesheet. Pick whichever of these fits your project.</p>
<div class="nk-code"><span class="lang">html</span><!-- CDN -->
<span class="tag"><link</span> <span class="attr">rel=</span>"stylesheet" <span class="attr">href=</span>"https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1/notionkit.min.css"<span class="tag">></span>
<!-- local -->
<span class="tag"><link</span> <span class="attr">rel=</span>"stylesheet" <span class="attr">href=</span>"notionkit.css"<span class="tag">></span>
<!-- your own theme, after the library -->
<span class="tag"><link</span> <span class="attr">rel=</span>"stylesheet" <span class="attr">href=</span>"theme-override.css"<span class="tag">></span></div>
<div class="nk-code"><span class="lang">html</span>npm install @jungherz-de/notionkit</div>
<p class="doc-note">The theme lives on <code class="nk-inline-code"><html></code>. Light is the default, so the attribute is only needed for dark:</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><html</span> <span class="attr">lang=</span>"en" <span class="attr">data-theme=</span>"dark"<span class="tag">></span>
<span class="tag"><body</span> <span class="attr">class=</span>"nk-body"<span class="tag">></span>
…
<span class="tag"></body</span><span class="tag">></span>
<span class="tag"></html</span><span class="tag">></span></div>
<p class="doc-note">Add <code class="nk-inline-code">class="nk-body"</code> to your <code class="nk-inline-code"><body></code> to pick up the font, background and text colour. It is opt-in: without it, NotionKit touches nothing outside its own classes.</p>
</section>
<section class="doc-section" id="tokens">
<h2>Design tokens</h2>
<p class="doc-note">Every visual value is a custom property. The two blocks below are the entire token surface — <code class="nk-inline-code">:root</code> for light, <code class="nk-inline-code">[data-theme="dark"]</code> for the overrides.</p>
<div class="doc-table-wrap"><table class="doc-table">
<thead><tr><th>Token</th><th>Light</th><th>Dark</th><th>What it is</th></tr></thead>
<tbody>
<tr><td><code>--nk-bg</code></td><td><span class="sw" style="background:#ffffff"></span><code>#ffffff</code></td><td><span class="sw" style="background:#191919"></span><code>#191919</code></td><td>Page background</td></tr>
<tr><td><code>--nk-bg-sidebar</code></td><td><span class="sw" style="background:#f9f8f7"></span><code>#f9f8f7</code></td><td><span class="sw" style="background:#202020"></span><code>#202020</code></td><td>Sidebar and settings nav</td></tr>
<tr><td><code>--nk-bg-hover</code></td><td><span class="sw" style="background:rgba(55,53,47,0.06)"></span><code>rgba(55,53,47,0.06)</code></td><td><span class="sw" style="background:rgba(255,255,255,0.055)"></span><code>rgba(255,255,255,0.055)</code></td><td>Hover wash — a darkening, never a hue change</td></tr>
<tr><td><code>--nk-bg-active</code></td><td><span class="sw" style="background:rgba(55,53,47,0.08)"></span><code>rgba(55,53,47,0.08)</code></td><td><span class="sw" style="background:rgba(255,255,255,0.08)"></span><code>rgba(255,255,255,0.08)</code></td><td>Active/selected row</td></tr>
<tr><td><code>--nk-bg-callout</code></td><td><span class="sw" style="background:#f0efed"></span><code>#f0efed</code></td><td><span class="sw" style="background:#252525"></span><code>#252525</code></td><td>Callouts, badges, key caps, segmented track</td></tr>
<tr><td><code>--nk-bg-code</code></td><td><span class="sw" style="background:#f7f6f3"></span><code>#f7f6f3</code></td><td><span class="sw" style="background:#202020"></span><code>#202020</code></td><td>Code block background</td></tr>
<tr><td><code>--nk-bg-card</code></td><td><span class="sw" style="background:#ffffff"></span><code>#ffffff</code></td><td><span class="sw" style="background:#202020"></span><code>#202020</code></td><td>Board cards and white buttons — separate from --nk-bg so dark mode can lift them</td></tr>
<tr><td><code>--nk-bg-input</code></td><td><span class="sw" style="background:rgba(242,241,238,0.6)"></span><code>rgba(242,241,238,0.6)</code></td><td><span class="sw" style="background:rgba(255,255,255,0.055)"></span><code>rgba(255,255,255,0.055)</code></td><td>The filled input surface: inputs, selects, textareas, the emoji search</td></tr>
<tr><td><code>--nk-text</code></td><td><span class="sw" style="background:#2c2c2b"></span><code>#2c2c2b</code></td><td><span class="sw" style="background:rgba(255,255,255,0.81)"></span><code>rgba(255,255,255,0.81)</code></td><td>Body text. Never pure black</td></tr>
<tr><td><code>--nk-text-secondary</code></td><td><span class="sw" style="background:#7d7a75"></span><code>#7d7a75</code></td><td><span class="sw" style="background:rgba(255,255,255,0.46)"></span><code>rgba(255,255,255,0.46)</code></td><td>Secondary text, table headers, descriptions</td></tr>
<tr><td><code>--nk-text-tertiary</code></td><td><span class="sw" style="background:#91918e"></span><code>#91918e</code></td><td><span class="sw" style="background:rgba(255,255,255,0.32)"></span><code>rgba(255,255,255,0.32)</code></td><td>Meta, placeholders, section labels</td></tr>
<tr><td><code>--nk-text-sidebar</code></td><td><span class="sw" style="background:#5f5e5b"></span><code>#5f5e5b</code></td><td><span class="sw" style="background:rgba(255,255,255,0.62)"></span><code>rgba(255,255,255,0.62)</code></td><td>Tree items, breadcrumbs, topbar buttons — one step darker than secondary, as in Notion</td></tr>
<tr><td><code>--nk-border</code></td><td><span class="sw" style="background:rgba(28,19,1,0.11)"></span><code>rgba(28,19,1,0.11)</code></td><td><span class="sw" style="background:rgba(255,255,255,0.094)"></span><code>rgba(255,255,255,0.094)</code></td><td>Hairline separators, table grid, input borders</td></tr>
<tr><td><code>--nk-border-strong</code></td><td><span class="sw" style="background:rgba(27,21,0,0.19)"></span><code>rgba(27,21,0,0.19)</code></td><td><span class="sw" style="background:rgba(255,255,255,0.16)"></span><code>rgba(255,255,255,0.16)</code></td><td>Input hover, scrollbar thumbs, dashed frames, checkboxes</td></tr>
<tr><td><code>--nk-accent</code></td><td><span class="sw" style="background:#2383e2"></span><code>#2383e2</code></td><td><span class="sw" style="background:#529CCA"></span><code>#529CCA</code></td><td>The one brand colour. Everything accented is mixed from it</td></tr>
<tr><td><code>--nk-on-accent</code></td><td><span class="sw" style="background:#ffffff"></span><code>#ffffff</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Text and marks on top of the accent or danger fill</td></tr>
<tr><td><code>--nk-danger</code></td><td><span class="sw" style="background:#cd3c3a"></span><code>#cd3c3a</code></td><td><span class="sw" style="background:#df5452"></span><code>#df5452</code></td><td>Destructive actions, inline code, negative deltas</td></tr>
<tr><td><code>--nk-tag-gray-bg</code></td><td><span class="sw" style="background:#e3e2e0"></span><code>#e3e2e0</code></td><td><span class="sw" style="background:#373737"></span><code>#373737</code></td><td>Tag fill (gray)</td></tr>
<tr><td><code>--nk-tag-gray-text</code></td><td><span class="sw" style="background:#32302c"></span><code>#32302c</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (gray), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-brown-bg</code></td><td><span class="sw" style="background:#eee0da"></span><code>#eee0da</code></td><td><span class="sw" style="background:#603b2c"></span><code>#603b2c</code></td><td>Tag fill (brown)</td></tr>
<tr><td><code>--nk-tag-brown-text</code></td><td><span class="sw" style="background:#442a1e"></span><code>#442a1e</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (brown), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-orange-bg</code></td><td><span class="sw" style="background:#fadec9"></span><code>#fadec9</code></td><td><span class="sw" style="background:#854c1d"></span><code>#854c1d</code></td><td>Tag fill (orange)</td></tr>
<tr><td><code>--nk-tag-orange-text</code></td><td><span class="sw" style="background:#49290e"></span><code>#49290e</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (orange), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-yellow-bg</code></td><td><span class="sw" style="background:#fdecc8"></span><code>#fdecc8</code></td><td><span class="sw" style="background:#89632a"></span><code>#89632a</code></td><td>Tag fill (yellow)</td></tr>
<tr><td><code>--nk-tag-yellow-text</code></td><td><span class="sw" style="background:#402c1b"></span><code>#402c1b</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (yellow), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-green-bg</code></td><td><span class="sw" style="background:#dbeddb"></span><code>#dbeddb</code></td><td><span class="sw" style="background:#2b593f"></span><code>#2b593f</code></td><td>Tag fill (green)</td></tr>
<tr><td><code>--nk-tag-green-text</code></td><td><span class="sw" style="background:#1c3829"></span><code>#1c3829</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (green), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-blue-bg</code></td><td><span class="sw" style="background:#d3e5ef"></span><code>#d3e5ef</code></td><td><span class="sw" style="background:#28456c"></span><code>#28456c</code></td><td>Tag fill (blue)</td></tr>
<tr><td><code>--nk-tag-blue-text</code></td><td><span class="sw" style="background:#183347"></span><code>#183347</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (blue), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-purple-bg</code></td><td><span class="sw" style="background:#e8deee"></span><code>#e8deee</code></td><td><span class="sw" style="background:#492f64"></span><code>#492f64</code></td><td>Tag fill (purple)</td></tr>
<tr><td><code>--nk-tag-purple-text</code></td><td><span class="sw" style="background:#412454"></span><code>#412454</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (purple), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-pink-bg</code></td><td><span class="sw" style="background:#f5e0e9"></span><code>#f5e0e9</code></td><td><span class="sw" style="background:#69314c"></span><code>#69314c</code></td><td>Tag fill (pink)</td></tr>
<tr><td><code>--nk-tag-pink-text</code></td><td><span class="sw" style="background:#4c2337"></span><code>#4c2337</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (pink), near-black on the fill</td></tr>
<tr><td><code>--nk-tag-red-bg</code></td><td><span class="sw" style="background:#ffe2dd"></span><code>#ffe2dd</code></td><td><span class="sw" style="background:#6e3630"></span><code>#6e3630</code></td><td>Tag fill (red)</td></tr>
<tr><td><code>--nk-tag-red-text</code></td><td><span class="sw" style="background:#5d1715"></span><code>#5d1715</code></td><td><span class="sw" style="background:rgba(255,255,255,0.85)"></span><code>rgba(255,255,255,0.85)</code></td><td>Tag text (red), near-black on the fill</td></tr>
<tr><td><code>--nk-tint-gray</code></td><td><span class="sw" style="background:#f1f1ef"></span><code>#f1f1ef</code></td><td><span class="sw" style="background:#252525"></span><code>#252525</code></td><td>Soft gray surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-gray</code></td><td><span class="sw" style="background:#787774"></span><code>#787774</code></td><td><span class="sw" style="background:#9b9b9b"></span><code>#9b9b9b</code></td><td>Coloured text and marks (gray)</td></tr>
<tr><td><code>--nk-tint-brown</code></td><td><span class="sw" style="background:#f4eeee"></span><code>#f4eeee</code></td><td><span class="sw" style="background:#2e2724"></span><code>#2e2724</code></td><td>Soft brown surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-brown</code></td><td><span class="sw" style="background:#9f6b53"></span><code>#9f6b53</code></td><td><span class="sw" style="background:#ba856f"></span><code>#ba856f</code></td><td>Coloured text and marks (brown)</td></tr>
<tr><td><code>--nk-tint-orange</code></td><td><span class="sw" style="background:#fbecdd"></span><code>#fbecdd</code></td><td><span class="sw" style="background:#36291f"></span><code>#36291f</code></td><td>Soft orange surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-orange</code></td><td><span class="sw" style="background:#d9730d"></span><code>#d9730d</code></td><td><span class="sw" style="background:#c77d48"></span><code>#c77d48</code></td><td>Coloured text and marks (orange) — also date mentions and code attributes</td></tr>
<tr><td><code>--nk-tint-yellow</code></td><td><span class="sw" style="background:#fbf3db"></span><code>#fbf3db</code></td><td><span class="sw" style="background:#372e20"></span><code>#372e20</code></td><td>Soft yellow surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-yellow</code></td><td><span class="sw" style="background:#cb912f"></span><code>#cb912f</code></td><td><span class="sw" style="background:#ca8f3d"></span><code>#ca8f3d</code></td><td>Coloured text and marks (yellow)</td></tr>
<tr><td><code>--nk-tint-green</code></td><td><span class="sw" style="background:#edf3ec"></span><code>#edf3ec</code></td><td><span class="sw" style="background:#242b26"></span><code>#242b26</code></td><td>Soft green surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-green</code></td><td><span class="sw" style="background:#448361"></span><code>#448361</code></td><td><span class="sw" style="background:#529e72"></span><code>#529e72</code></td><td>Coloured text and marks (green) — also the positive delta</td></tr>
<tr><td><code>--nk-tint-blue</code></td><td><span class="sw" style="background:#e7f3f8"></span><code>#e7f3f8</code></td><td><span class="sw" style="background:#1f282d"></span><code>#1f282d</code></td><td>Soft blue surface for banners and tinted blocks — also the progress track</td></tr>
<tr><td><code>--nk-color-blue</code></td><td><span class="sw" style="background:#337ea9"></span><code>#337ea9</code></td><td><span class="sw" style="background:#5e87c9"></span><code>#5e87c9</code></td><td>Coloured text and marks (blue) — also the progress fill</td></tr>
<tr><td><code>--nk-tint-purple</code></td><td><span class="sw" style="background:#f8f3fc"></span><code>#f8f3fc</code></td><td><span class="sw" style="background:#2a2430"></span><code>#2a2430</code></td><td>Soft purple surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-purple</code></td><td><span class="sw" style="background:#9065b0"></span><code>#9065b0</code></td><td><span class="sw" style="background:#9d68d3"></span><code>#9d68d3</code></td><td>Coloured text and marks (purple)</td></tr>
<tr><td><code>--nk-tint-pink</code></td><td><span class="sw" style="background:#fcf1f6"></span><code>#fcf1f6</code></td><td><span class="sw" style="background:#2e2328"></span><code>#2e2328</code></td><td>Soft pink surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-pink</code></td><td><span class="sw" style="background:#c14c8a"></span><code>#c14c8a</code></td><td><span class="sw" style="background:#d15796"></span><code>#d15796</code></td><td>Coloured text and marks (pink)</td></tr>
<tr><td><code>--nk-tint-red</code></td><td><span class="sw" style="background:#fdebec"></span><code>#fdebec</code></td><td><span class="sw" style="background:#332523"></span><code>#332523</code></td><td>Soft red surface for banners and tinted blocks</td></tr>
<tr><td><code>--nk-color-red</code></td><td><span class="sw" style="background:#cd3c3a"></span><code>#cd3c3a</code></td><td><span class="sw" style="background:#df5452"></span><code>#df5452</code></td><td>Coloured text and marks (red)</td></tr>
<tr><td><code>--nk-decor-purple</code></td><td><span class="sw" style="background:#9065b0"></span><code>#9065b0</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Avatar gradient start and cover. Same in both themes on purpose</td></tr>
<tr><td><code>--nk-decor-blue</code></td><td><span class="sw" style="background:#529cca"></span><code>#529cca</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Avatar gradient end and cover</td></tr>
<tr><td><code>--nk-decor-orange</code></td><td><span class="sw" style="background:#d9730d"></span><code>#d9730d</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Cover accent</td></tr>
<tr><td><code>--nk-scrim</code></td><td><span class="sw" style="background:rgba(15,15,15,0.6)"></span><code>rgba(15,15,15,0.6)</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Modal backdrop</td></tr>
<tr><td><code>--nk-scrim-soft</code></td><td><span class="sw" style="background:rgba(15,15,15,0.5)"></span><code>rgba(15,15,15,0.5)</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Command palette backdrop, one step lighter</td></tr>
<tr><td><code>--nk-sidebar-width</code></td><td><code>260px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Sidebar width, also its min-width (plus the left safe-area inset, if any)</td></tr>
<tr><td><code>--nk-peek-width</code></td><td><code>560px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Width of the side peek; .pk-resize sets it on :root while dragging</td></tr>
<tr><td><code>--nk-page-full-max</code></td><td><code>none</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Cap of a .nk-page.full column – none: the whole window, 1080px for a dashboard without 1600px lines</td></tr>
<tr><td><code>--nk-cover-height</code></td><td><code>200px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Height of the page cover band – on :root or on one cover; Notion takes about 30vh</td></tr>
<tr><td><code>--nk-panel-cover-height</code></td><td><code>64px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Height of a cover inside a panel, the band of a page tile</td></tr>
<tr><td><code>--nk-tab-bar-height</code></td><td><code>58px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Mobile tab bar height without the safe-area inset (the inset replaces the 6px bottom padding); the spacer uses the same value</td></tr>
<tr><td><code>--nk-radius</code></td><td><code>6px</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Control radius. Cards and modals use 8–12px directly</td></tr>
<tr><td><code>--nk-font</code></td><td><code>ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>System font stack</td></tr>
<tr><td><code>--nk-font-mono</code></td><td><code>ui-monospace, "SF Mono", Menlo, Consolas, monospace</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Monospace stack for code</td></tr>
<tr><td><code>--nk-shadow-menu</code></td><td><span class="sw" style="background:rgba(15,15,15,0.05) 0px 0px 0px 1px, rgba(15,15,15,0.1) 0px 3px 6px, rgba(15,15,15,0.2) 0px 9px 24px"></span><code>rgba(15,15,15,0.05) 0px 0px 0px 1px, rgba(15,15,15,0.1) 0px 3px 6px, rgba(15,15,15,0.2) 0px 9px 24px</code></td><td><span class="sw" style="background:rgba(15,15,15,0.2) 0px 0px 0px 1px, rgba(15,15,15,0.4) 0px 3px 6px, rgba(15,15,15,0.6) 0px 9px 24px"></span><code>rgba(15,15,15,0.2) 0px 0px 0px 1px, rgba(15,15,15,0.4) 0px 3px 6px, rgba(15,15,15,0.6) 0px 9px 24px</code></td><td>Three-layer shadow for every floating surface</td></tr>
<tr><td><code>--nk-shadow-card</code></td><td><code>0 1px 2px rgba(0,0,0,0.04)</code></td><td><code>none</code></td><td>Board card lift. `none` in dark mode</td></tr>
<tr><td><code>--nk-shadow-btn</code></td><td><code>inset 0 0 0 1px rgba(15,15,15,0.1), 0 1px 2px rgba(15,15,15,0.1)</code></td><td><code>inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.3)</code></td><td>The white button’s outline: a 1px inset ring plus a 1px drop, no border</td></tr>
<tr><td><code>--nk-shadow-knob</code></td><td><code>0 1px 2px rgba(0,0,0,0.2)</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Switch knob</td></tr>
<tr><td><code>--nk-shadow-segment</code></td><td><code>0 1px 2px rgba(0,0,0,0.08)</code></td><td><span style="color:var(--nk-text-tertiary)">—</span></td><td>Active segment</td></tr>
</tbody>
</table></div>
<p class="doc-note">Re-branding is one declaration. Everything derived — the focus ring, the checked states, the selected model card, the danger hover — is mixed from a token with <code class="nk-inline-code">color-mix()</code>, so it follows along:</p>
<div class="nk-code"><span class="lang">html</span>:root {
--nk-accent: #16a34a;
}</div>
</section>
<section class="doc-section" id="theming">
<h2>Theming</h2>
<p class="doc-note">Switch by setting one attribute. Nothing else moves.</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><html</span> <span class="attr">data-theme=</span>"light"<span class="tag">></span> <!-- default, the attribute may be omitted -->
<span class="tag"><html</span> <span class="attr">data-theme=</span>"dark"<span class="tag">></span></div>
<div class="nk-code"><span class="lang">html</span>document.documentElement.setAttribute('data-theme', 'dark');</div>
<p class="doc-note">The token blocks also set <code class="nk-inline-code">color-scheme</code>, so browser-drawn UI — date pickers, number spinners, select popups, scrollbars, autofill — follows the theme without any extra work.</p>
<p class="doc-note">To see re-branding in action, use the 🎨 button in the top bar: it applies the example palettes from <code class="nk-inline-code">theme-override.css</code> (Forest, Slate, Sunset, High contrast) live on this page. The demo app has the same switch under Settings → Appearance.</p>
</section>
<section class="doc-section" id="states">
<h2>State classes</h2>
<p class="doc-note">NotionKit ships states, not behaviour. Add and remove these classes yourself; there is no JavaScript in the library.</p>
<div class="doc-table-wrap"><table class="doc-table">
<thead><tr><th>Class</th><th>Applies to</th><th>Effect</th></tr></thead>
<tbody><tr><td><code>[hidden]</code></td><td><code>[class*="nk-"]</code> <code>::slotted(*)</code></td><td>Hides, always – also on components that set their own display, which beat the browser rule before 1.5.2. hidden="until-found" keeps the browser’s find-in-page reveal.</td></tr>
<tr><td><code>.active</code></td><td><code>nk-tree-item</code> <code>nk-db-tab</code> <code>nk-tab</code> <code>nk-tab-bar-item</code> <code>nk-settings-pane</code> <code>nk-segmented button</code> <code>nk-emoji-cats span</code> <code>nk-board</code> <code>nk-bubble-menu button</code></td><td>Marks the current item. Tree items and view tabs get the active background, .nk-tab gets the underline, panes become visible.</td></tr>
<tr><td><code>.open</code></td><td><code>nk-modal-backdrop</code> <code>nk-cmdk-backdrop</code> <code>nk-sheet-backdrop</code> <code>nk-dialog-backdrop</code> <code>nk-peek-backdrop</code> <code>nk-pop.floating</code> <code>nk-tooltip</code> <code>nk-sidebar</code> <code>nk-sidebar-backdrop</code> <code>nk-toggle-arrow</code></td><td>Fades the overlay in and makes it interactive; slides the side peek in from the right; shows a floating menu or a tooltip; slides the sidebar in as a drawer on a phone; rotates the toggle arrow by 90°.</td></tr>
<tr><td><code>.peek-inset</code></td><td><code>nk-app</code></td><td>While the side peek is open: the main column gets a right padding as wide as the peek, so the page moves aside instead of lying under it. Desktop only.</td></tr>
<tr><td><code>.copied</code></td><td><code>nk-copy-field .cf-btn</code></td><td>The moment after copying: the action turns green. Set it after the clipboard write and take it off again.</td></tr>
<tr><td><code>.square</code></td><td><code>nk-profile-row .big-avatar</code></td><td>The rounded square of a workspace icon instead of the circle of a person.</td></tr>
<tr><td><code>.floating</code></td><td><code>nk-pop</code></td><td>A menu over the page: invisible and inert until .open, then it fades in and settles from 4px higher and 98 %, the way the palette opens.</td></tr>
<tr><td><code>.sheet</code></td><td><code>nk-pop</code></td><td>Below 860px the popover becomes a bottom sheet – full width, grabber, 40px rows, the page dimmed – and inline positioning is overruled.</td></tr>
<tr><td><code>.done / current</code></td><td><code>nk-step</code></td><td>A finished step on the green tag with a check; the step you are on, ringed in the accent, with aria-current="step".</td></tr>
<tr><td><code>.collapsed</code></td><td><code>nk-tree-children</code> <code>nk-sidebar</code> <code>nk-sidebar-toggle</code></td><td>Folds a subtree away with display: none. On the sidebar it slides it out to the left on the desktop; on the ☰ it shows the button that brings it back.</td></tr>
<tr><td><code>.selected</code></td><td><code>nk-cmdk-item</code> <code>nk-model-card</code> <code>nk-slash-item</code> <code>nk-calendar .cal-day</code></td><td>The keyboard-highlighted or chosen option – on a calendar the chosen day, in the accent. Distinct from active: selection is transient, active is where you are.</td></tr>
<tr><td><code>.start / end / in-range</code></td><td><code>nk-calendar .cal-day</code></td><td>A range: its first and last day in the accent, rounded on the outer side, the days between in the accent’s tint. A range of one day is start and end.</td></tr>
<tr><td><code>.today / off / out</code></td><td><code>nk-calendar .cal-day</code> <code>nk-calendar-view .cv-day</code></td><td>Today in red – on the calendar view a red pill; a day not worked (weekend, holiday) greyed or washed; a day of the month before or after, the same.</td></tr>
<tr><td><code>.weeks</code></td><td><code>nk-calendar</code> <code>nk-calendar-view</code></td><td>Adds the column of ISO calendar weeks in front of the days.</td></tr>
<tr><td><code>.stacked</code></td><td><code>nk-field</code></td><td>Label above a full-width control instead of beside it – textareas, long descriptions.</td></tr>
<tr><td><code>.compact</code></td><td><code>nk-field</code> <code>nk-tree-item</code> <code>nk-select</code></td><td>The tighter variant: a field with a small tertiary label and no row padding (inside .nk-fields), a 26px tree row, a 120px select.</td></tr>
<tr><td><code>.scroll</code></td><td><code>nk-segmented</code></td><td>Scrolls the segments horizontally with the scrollbar hidden, capped at the parent width.</td></tr>
<tr><td><code>.wrap</code></td><td><code>nk-segmented</code> <code>nk-table</code> <code>nk-table td</code></td><td>Lets the segments wrap onto further rows; on a table or a cell, lets cell text break instead of staying on one line.</td></tr>
<tr><td><code>.fixed</code></td><td><code>nk-tab-bar</code></td><td>Pins the tab bar to the viewport bottom; a following .nk-tab-bar-spacer keeps its height in the flow.</td></tr>
<tr><td><code>.covered</code></td><td><code>nk-page</code></td><td>The page follows a cover: no top padding, the icon overlaps the cover’s bottom edge. Class markup gets this from .nk-cover + .nk-page; <nk-page cover> sets the class.</td></tr>
<tr><td><code>.full</code></td><td><code>nk-page</code></td><td>Page option “Full width”: lifts the 760px cap, the column fills the window. Per page, as in Notion’s ⋯ menu.</td></tr>
<tr><td><code>.small</code></td><td><code>nk-page</code> <code>nk-avatar</code> <code>nk-btn</code></td><td>Page option “Small text”: document text 14px instead of 16px; heading, lead, prose and editor follow. On an avatar 20px, on a button 24px.</td></tr>
<tr><td><code>.wide</code></td><td><code>nk-progress</code> <code>nk-input</code> <code>nk-select</code> <code>nk-textarea</code></td><td>Fills its row. A wide progress bar grows from 60px in a flex row, so its label stays beside it.</td></tr>
<tr><td><code>.bubble</code></td><td><code>nk-ai-msg</code></td><td>The message as a grey bubble without avatar or name; with .user it sits on the right, as your own question does in Notion’s AI chat.</td></tr>
<tr><td><code>.last</code></td><td><code>nk-list-item</code> <code>nk-member-row</code></td><td>Drops the row’s bottom line where the list cannot see the last child – a row rendered in its own shadow root.</td></tr>
<tr><td><code>.always</code></td><td><code>nk-tab-bar</code></td><td>Shows the tab bar at every width, not only below 860px – for previews and phone frames.</td></tr>
<tr><td><code>.show</code></td><td><code>nk-toast</code></td><td>Slides the toast up from below and fades it in.</td></tr>
<tr><td><code>.aria-checked="true"</code></td><td><code>nk-switch (button form)</code></td><td>Fills the track with the accent and slides the knob. An attribute, not a class, so the state is also announced to assistive technology.</td></tr>
<tr><td><code>.:checked</code></td><td><code>nk-todo input</code> <code>nk-check input</code> <code>nk-switch (input form)</code></td><td>Native state. Draws the custom checkmark or dot and strikes a to-do label through.</td></tr>
<tr><td><code>.nk-drop-target</code></td><td><code>nk-block-host</code></td><td>Drag feedback: a 2px accent line above the block.</td></tr></tbody>
</table></div>
</section>
<section class="doc-section" id="contrast">
<h2>Contrast</h2>
<p class="doc-note">Measured contrast ratios for the default palette against the surface each pair actually sits on. Body text clears WCAG AA comfortably in both themes. Secondary and tertiary text, the tag pairs, the primary button label and the danger colour sit below 4.5:1 — these are Notion’s own values, kept deliberately.</p>
<div class="doc-table-wrap"><table class="doc-table">
<thead><tr><th>Pair</th><th>Light</th><th>Dark</th><th>AA body text</th></tr></thead>
<tbody><tr><td><code>--nk-text / --nk-bg</code></td><td><span class="pass">13.98</span></td><td><span class="pass">11.78</span></td><td><span class="pass">✓</span></td></tr>
<tr><td><code>--nk-text / --nk-bg-sidebar</code></td><td><span class="pass">13.18</span></td><td><span class="pass">11.06</span></td><td><span class="pass">✓</span></td></tr>
<tr><td><code>--nk-text-sidebar / --nk-bg-sidebar</code></td><td><span class="pass">6.11</span></td><td><span class="pass">7.03</span></td><td><span class="pass">✓</span></td></tr>
<tr><td><code>--nk-text-secondary / --nk-bg</code></td><td><span class="warn">4.27</span></td><td><span class="pass">4.63</span></td><td><span class="warn">✗</span></td></tr>
<tr><td><code>--nk-text-tertiary / --nk-bg</code></td><td><span class="warn">3.16</span></td><td><span class="warn">2.91</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>--nk-accent / --nk-bg</code></td><td><span class="warn">3.88</span></td><td><span class="pass">5.83</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>--nk-on-accent / --nk-accent</code></td><td><span class="warn">3.88</span></td><td><span class="warn">3.01</span></td><td><span class="warn">✗</span></td></tr>
<tr><td><code>--nk-danger / --nk-bg</code></td><td><span class="pass">4.88</span></td><td><span class="pass">4.63</span></td><td><span class="pass">✓</span></td></tr>
<tr><td><code>tag gray</code></td><td><span class="pass">10.17</span></td><td><span class="pass">9.10</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag blue</code></td><td><span class="pass">10.12</span></td><td><span class="pass">7.56</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag green</code></td><td><span class="pass">10.41</span></td><td><span class="pass">6.37</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag orange</code></td><td><span class="pass">10.18</span></td><td><span class="pass">5.49</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag yellow</code></td><td><span class="pass">11.30</span></td><td><span class="warn">4.42</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag purple</code></td><td><span class="pass">10.04</span></td><td><span class="pass">8.59</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr>
<tr><td><code>tag red</code></td><td><span class="pass">10.74</span></td><td><span class="pass">7.30</span></td><td><span style="color:var(--nk-text-tertiary)">—</span></td></tr></tbody>
</table></div>
<p class="doc-note">If your project needs AA everywhere, <code class="nk-inline-code">theme-override.css</code> ships a ready high-contrast block: uncomment it and the failing pairs are lifted, with the rest of the design untouched.</p>
</section>
<section class="doc-section" id="editor">
<h2>Editor integration</h2>
<p class="doc-note">NotionKit ships no editor. What it does ship is <code class="nk-inline-code">.nk-block-host</code> — the optical shell — plus a themed adapter layer scoped inside it. The integration contract is one class on the host element.</p>
<h3>TipTap / ProseMirror — the vanilla-JS path</h3>
<p class="doc-note">Load TipTap from a CDN as an ES module and mount it into an element carrying <code class="nk-inline-code">nk-block-host</code>. The adapter rules do the rest: typography, headings, lists, quotes, code, links, selection and the placeholder are all styled from <code class="nk-inline-code">--nk-*</code> tokens.</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-block-host" <span class="attr">id=</span>"editor"<span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><script</span> <span class="attr">type=</span>"module"<span class="tag">></span>
import { Editor } from 'https://esm.sh/@tiptap/core@2';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2';
import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder@2';
new Editor({
element: document.getElementById('editor'),
extensions: [StarterKit, Placeholder.configure({ placeholder: 'Type "/" for commands …' })],
content: '<span class="tag"><p</span><span class="tag">></span>Hello NotionKit.<span class="tag"></p</span><span class="tag">></span>',
});
<span class="tag"></script</span><span class="tag">></span></div>
<h3>BlockNote — the React path</h3>
<p class="doc-note">Same idea: render the BlockNote view inside a block host. <code class="nk-inline-code">.bn-container</code>, <code class="nk-inline-code">.bn-editor</code>, <code class="nk-inline-code">.bn-block-content</code>, the side menu and the drag handle are all covered, and <code class="nk-inline-code">.bn-suggestion-menu</code> picks up the slash-menu look automatically.</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-block-host"<span class="tag">></span>
<span class="tag"><BlockNoteView</span> <span class="attr">editor=</span>{editor} <span class="attr">theme=</span>"light" <span class="tag">/></span>
<span class="tag"></div</span><span class="tag">></span></div>
<h3>Novel — the Next.js path</h3>
<p class="doc-note">Novel builds on ProseMirror, so the TipTap rules already apply. <code class="nk-inline-code">.novel-editor</code> and <code class="nk-inline-code">.novel-prose</code> get the font and colour, and the prose width cap is released so the page column governs it.</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-block-host"<span class="tag">></span>
<span class="tag"><EditorContent</span> <span class="attr">className=</span>"novel-editor" <span class="tag">/></span>
<span class="tag"></div</span><span class="tag">></span></div>
<h3>Live: TipTap running inside a block host</h3>
<p class="doc-note">The editor below is real TipTap, loaded from a CDN, with no CSS of its own. Hover a block for the + / ⠿ rail and drag it, select text for the bubble toolbar, press <kbd class="nk-kbd">/</kbd> for the slash menu, and switch the theme — everything you see comes from the adapter section of notionkit.css.</p>
<div class="doc-preview" id="tiptap-demo-box" style="padding-left:56px">
<div class="nk-block-host" id="tiptap-demo"></div>
</div>
<p class="doc-note">The full recipe — slash menu on <code class="nk-inline-code">@tiptap/suggestion</code>, bubble toolbar, block handle with drag & drop and a block menu — is <a href="docs-editor.js">docs-editor.js</a>, about 300 lines of plain JavaScript. It puts NotionKit classes on its DOM (<code class="nk-inline-code">nk-slash-menu</code>, <code class="nk-inline-code">nk-bubble-menu</code>, <code class="nk-inline-code">nk-block-actions</code>, <code class="nk-inline-code">nk-menu</code>) and lets the stylesheet do the rest.</p>
</section>
<section class="doc-section" id="shadow">
<h2>Web components</h2>
<p class="doc-note">The stylesheet ships split in two so web components can adopt the component rules without re-declaring tokens inside their shadow roots.</p>
<div class="nk-code"><span class="lang">html</span>import { componentsSheet, tokensCss } from '@jungherz-de/notionkit/notionkit-styles.js';
// Tokens go on the document once, wrapped in a layer so a brand
// stylesheet wins no matter the load order.
const tokens = new CSSStyleSheet();
tokens.replaceSync(`@layer notionkit-defaults { ${tokensCss} }`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, tokens];
class NkCallout extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.adoptedStyleSheets = [componentsSheet]; // components only
}
}</div>
<h3>Why the split matters</h3>
<p class="doc-note">A shadow root that adopts the whole sheet also adopts the <code class="nk-inline-code">:root</code> and <code class="nk-inline-code">[data-theme]</code> blocks. Inside that root the selectors match the element’s own theme wrapper, so every token is re-declared locally — and a matching rule always beats an inherited value. A consumer’s own <code class="nk-inline-code">:root { --nk-accent: … }</code> would then never arrive. Adopt <code class="nk-inline-code">componentsSheet</code> only, and put <code class="nk-inline-code">tokensCss</code> on the document.</p>
<h3>The ::slotted() twins</h3>
<p class="doc-note">Content passed in from outside stays in the light DOM and is no descendant of anything in the shadow tree, so <code class="nk-inline-code">.nk-callout .c-icon</code> cannot reach it. Every such rule therefore has a <code class="nk-inline-code">::slotted()</code> twin beside it — 92 of them, including a <code class="nk-inline-code">[slot="…"]</code> twin for every named slot of NotionKit Elements. Two limits: <code class="nk-inline-code">::slotted()</code> matches only the assigned node, never inside it (pass icons directly, never wrapped), and for slotted content the outer tree wins over the shadow tree.</p>
<div class="nk-code"><span class="lang">html</span>.nk-callout .c-icon,
.nk-callout ::slotted(.c-icon) { font-size: 17px; }</div>
<p class="doc-note">A working proof of concept ships as <a href="elements-poc.html">elements-poc.html</a> — an <code class="nk-inline-code"><nk-callout></code> and an <code class="nk-inline-code"><nk-tag color="…"></code> that adopt <code class="nk-inline-code">componentsSheet</code>, re-theme through <code class="nk-inline-code">data-theme</code> and take the page’s branding. The page measures all of that live (it needs a build and a server: <code class="nk-inline-code">npm run build</code>, then serve the folder).</p>
</section>
<section class="doc-group" id="shell">
<h2>App shell & layout</h2>
<div class="prd">PRD 5.1</div>
<article class="doc-entry" id="nk-app">
<h3>App shell <code>.nk-app</code></h3>
<p class="doc-desc"><code>nk-app</code> is a full-height flex row: sidebar left, main column right. It is the outermost element of a workspace app and the only place a fixed height belongs. Inside the sidebar, <code>nk-sidebar-scroll</code> is the scrolling tree area and <code>nk-sidebar-footer</code> the pinned bottom (Settings, Trash). On the desktop the sidebar collapses as in Notion: <code>.nk-sidebar-head</code> holds the workspace row and the « <code>.nk-sidebar-collapse</code>, which shows while the pointer is over the sidebar; <code>.collapsed</code> on the sidebar slides it out to the left – the main column takes the width, the hidden sidebar takes no focus – and <code>.collapsed</code> on the topbar's <code>.nk-sidebar-toggle</code> shows the ☰ that brings it back. Notion's shortcut is ⌘\.</p>
<div class="doc-preview is-frame" style="height:340px"><div class="nk-app" style="height:100%">
<aside class="nk-sidebar">
<div class="nk-sidebar-head">
<div class="nk-workspace"><div class="avatar">A</div>Acme Inc<span class="chev">⌄</span></div>
<button class="nk-sidebar-collapse" aria-label="Close sidebar"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg></button>
</div>
<div class="nk-sidebar-scroll">
<div class="nk-tree-item"><span class="icon">🔍</span><span class="label">Search</span></div>
<div class="nk-tree-item active"><span class="icon">🏠</span><span class="label">Home</span></div>
<div class="nk-tree-item"><span class="icon">📥</span><span class="label">Inbox</span></div>
</div>
<div class="nk-sidebar-footer">
<div class="nk-tree-item"><span class="icon">⚙️</span><span class="label">Settings</span></div>
</div>
</aside>
<main class="nk-main">
<header class="nk-topbar">
<button class="nk-topbar-btn nk-sidebar-toggle" aria-label="Menu">☰</button>
<div class="nk-breadcrumb"><span class="crumb current">📊 Project overview</span></div>
<div class="nk-topbar-actions"><button class="nk-topbar-btn nk-share-btn">Share</button></div>
</header>
<div class="nk-page-scroll"><div class="nk-page" style="padding-top:16px">
<h1 class="nk-page-title" style="font-size:28px">Product roadmap</h1>
<p class="lead">A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.</p>
</div></div>
</main>
</div></div>
<pre class="nk-code"><span class="lang">html</span><div class="nk-sidebar-backdrop open"></div> <!-- phones: the drawer's scrim -->
<aside class="nk-sidebar open">…</aside> <!-- slides in over the page -->
<button class="nk-topbar-btn nk-sidebar-toggle" aria-label="Menu">☰</button></pre>
<pre class="nk-code"><span class="lang">js</span>collapseBtn.addEventListener('click', () => { // the « in .nk-sidebar-head
sidebar.classList.add('collapsed'); // slides out on the desktop
sidebarToggle.classList.add('collapsed'); // the ☰ in the topbar brings it back
});</pre>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-app" <span class="attr">style=</span>"height:100%"<span class="tag">></span>
<span class="tag"><aside</span> <span class="attr">class=</span>"nk-sidebar"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-sidebar-head"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-workspace"<span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"avatar"<span class="tag">></span>A<span class="tag"></div</span><span class="tag">></span>Acme Inc<span class="tag"><span</span> <span class="attr">class=</span>"chev"<span class="tag">></span>⌄<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-sidebar-collapse" <span class="attr">aria-label=</span>"Close sidebar"<span class="tag">></span><span class="tag"><svg</span> <span class="attr">viewBox=</span>"0 0 24 24" <span class="attr">aria-hidden=</span>"true"<span class="tag">></span><span class="tag"><path</span> <span class="attr">d=</span>"m18 17-5-5 5-5M11 17l-5-5 5-5"<span class="tag">/></span><span class="tag"></svg</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-sidebar-scroll"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🔍<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Search<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item active"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🏠<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Home<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📥<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Inbox<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-sidebar-footer"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>⚙️<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Settings<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></aside</span><span class="tag">></span>
<span class="tag"><main</span> <span class="attr">class=</span>"nk-main"<span class="tag">></span>
<span class="tag"><header</span> <span class="attr">class=</span>"nk-topbar"<span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn nk-sidebar-toggle" <span class="attr">aria-label=</span>"Menu"<span class="tag">></span>☰<span class="tag"></button</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-breadcrumb"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"crumb current"<span class="tag">></span>📊 Project overview<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-topbar-actions"<span class="tag">></span><span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn nk-share-btn"<span class="tag">></span>Share<span class="tag"></button</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></header</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-page-scroll"<span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"nk-page" <span class="attr">style=</span>"padding-top:16px"<span class="tag">></span>
<span class="tag"><h1</span> <span class="attr">class=</span>"nk-page-title" <span class="attr">style=</span>"font-size:28px"<span class="tag">></span>Product roadmap<span class="tag"></h1</span><span class="tag">></span>
<span class="tag"><p</span> <span class="attr">class=</span>"lead"<span class="tag">></span>A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.<span class="tag"></p</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></main</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Below 860px the sidebar steps aside and the main column takes the full width. <code>.open</code> brings it back as an off-canvas drawer over the page, with a <code>.nk-sidebar-backdrop</code> as its scrim: it slides in and the scrim fades, CSS only. The ☰ that opens it is a <code>.nk-topbar-btn.nk-sidebar-toggle</code> at the start of the topbar, shown on phones only; toggle <code>.open</code> on sidebar and backdrop, close on the backdrop, Escape and a chosen page. The height is <code>100dvh</code> with a <code>100vh</code> fallback, so a standalone PWA on iOS does not count the status bar into the shell. Safe areas are handled per surface, not on <code>nk-app</code>: topbar, page, sidebar and tab bar pad their content by the left/right insets (Dynamic Island in landscape) while their backgrounds run edge to edge.</span></div>
<div class="doc-classes"><code>.nk-app</code><code>.nk-sidebar</code><code>.nk-sidebar-head</code><code>.nk-sidebar-collapse</code><code>.nk-sidebar-scroll</code><code>.nk-sidebar-footer</code><code>.nk-main</code><code>.nk-sidebar-backdrop</code><code>.nk-sidebar-toggle</code><code>.open</code><code>.collapsed</code></div>
</article>
<article class="doc-entry" id="nk-workspace">
<h3>Workspace switcher <code>.nk-workspace</code></h3>
<p class="doc-desc">Sits at the very top of the sidebar. The avatar gradient is mixed from <code>--nk-decor-purple</code> and <code>--nk-decor-blue</code>, so it survives a re-brand untouched.</p>
<div class="doc-preview"><div class="nk-workspace" style="background:var(--nk-bg-sidebar);max-width:244px">
<div class="avatar">A</div>Acme Inc<span class="chev">⌄</span>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-workspace" <span class="attr">style=</span>"background:var(--nk-bg-sidebar);max-width:244px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"avatar"<span class="tag">></span>A<span class="tag"></div</span><span class="tag">></span>Acme Inc<span class="tag"><span</span> <span class="attr">class=</span>"chev"<span class="tag">></span>⌄<span class="tag"></span</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Hidden together with the sidebar below 860px.</span></div>
<div class="doc-classes"><code>.nk-workspace</code><code>.avatar</code><code>.chev</code></div>
</article>
<article class="doc-entry" id="nk-topbar">
<h3>Topbar <code>.nk-topbar</code></h3>
<p class="doc-desc">A 44px-high row holding the breadcrumb on the left and actions on the right. <code>nk-topbar-actions</code> pushes itself right with <code>margin-left:auto</code>, so you never need a spacer. Passive text among the actions – "Edited 2 min ago" – is <code>nk-topbar-meta</code>. <code>nk-theme-glyph</code> wraps the appearance glyph of a theme button: one emoji for a fixed theme, with <code>auto</code> sun and moon diagonally for the mode that follows the system.</p>
<div class="doc-preview"><header class="nk-topbar" style="border:1px solid var(--nk-border);border-radius:var(--nk-radius)">
<div class="nk-breadcrumb">
<span class="crumb">📊 Project overview</span><span class="sep">/</span><span class="crumb current">🚀 Roadmap</span>
</div>
<div class="nk-topbar-actions">
<span class="nk-topbar-meta">Last edited 2 min ago</span>
<button class="nk-topbar-btn">💬</button>
<button class="nk-topbar-btn nk-share-btn">Share</button>
<button class="nk-topbar-btn">⭐</button>
<button class="nk-topbar-btn nk-theme-toggle">🌙</button>
<button class="nk-topbar-btn nk-theme-toggle" title="Appearance: automatic"><span class="nk-theme-glyph auto"><span>☀️</span><span>🌙</span></span></button>
<button class="nk-topbar-btn">⋯</button>
</div>
</header></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><header</span> <span class="attr">class=</span>"nk-topbar" <span class="attr">style=</span>"border:1px solid var(--nk-border);border-radius:var(--nk-radius)"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-breadcrumb"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"crumb"<span class="tag">></span>📊 Project overview<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"sep"<span class="tag">></span>/<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"crumb current"<span class="tag">></span>🚀 Roadmap<span class="tag"></span</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-topbar-actions"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"nk-topbar-meta"<span class="tag">></span>Last edited 2 min ago<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn"<span class="tag">></span>💬<span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn nk-share-btn"<span class="tag">></span>Share<span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn"<span class="tag">></span>⭐<span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn nk-theme-toggle"<span class="tag">></span>🌙<span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn nk-theme-toggle" <span class="attr">title=</span>"Appearance: automatic"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-theme-glyph auto"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>☀️<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span><span class="tag">></span>🌙<span class="tag"></span</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-topbar-btn"<span class="tag">></span>⋯<span class="tag"></button</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></header</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Below 860px the topbar keeps the page and its actions, as Notion's mobile app does: only the last crumb stays and ends in an ellipsis, <code>nk-topbar-meta</code> hides.</span></div>
<div class="doc-classes"><code>.nk-topbar</code><code>.nk-topbar-actions</code><code>.nk-topbar-btn</code><code>.nk-topbar-meta</code><code>.nk-share-btn</code><code>.nk-theme-toggle</code><code>.nk-theme-glyph</code></div>
</article>
<article class="doc-entry" id="nk-tab-bar">
<h3>Tab bar (mobile) <code>.nk-tab-bar</code></h3>
<p class="doc-desc">The thumb-reachable twin of the sidebar for phones and installed PWAs: up to five destinations in a row, each an icon over a short label, the current one in <code>--nk-accent</code>. Put it last inside <code>nk-main</code> – it sits below the scrolling page and never moves. In a document that scrolls itself it sticks to the viewport bottom. <code>floating</code> makes it a capsule; <code>fixed</code> pins it to the viewport bottom for standalone PWAs, with a <code>.nk-tab-bar-spacer</code> right after it keeping its height (<code>--nk-tab-bar-height</code> plus the safe area) in the flow. The fifth item usually opens the sidebar as a drawer.</p>
<div class="doc-preview"><div style="max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden">
<nav class="nk-tab-bar always">
<button class="nk-tab-bar-item active"><span class="icon">🏠</span><span class="label">Home</span></button>
<button class="nk-tab-bar-item"><span class="icon">📥</span><span class="label">Inbox</span></button>
<button class="nk-tab-bar-item"><span class="icon">🔍</span><span class="label">Search</span></button>
<button class="nk-tab-bar-item"><span class="icon">⚙️</span><span class="label">Settings</span></button>
<button class="nk-tab-bar-item"><span class="icon">☰</span><span class="label">More</span></button>
</nav>
</div>
<pre class="nk-code" style="margin-top:12px"><span class="lang">html</span><nav class="nk-tab-bar fixed">…</nav><div class="nk-tab-bar-spacer"></div></pre></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">style=</span>"max-width:390px;border:1px solid var(--nk-border);border-radius:12px;overflow:hidden"<span class="tag">></span>
<span class="tag"><nav</span> <span class="attr">class=</span>"nk-tab-bar always"<span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-tab-bar-item active"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🏠<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Home<span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-tab-bar-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📥<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Inbox<span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-tab-bar-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🔍<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Search<span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-tab-bar-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>⚙️<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Settings<span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"><button</span> <span class="attr">class=</span>"nk-tab-bar-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>☰<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>More<span class="tag"></span</span><span class="tag">></span><span class="tag"></button</span><span class="tag">></span>
<span class="tag"></nav</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><pre</span> <span class="attr">class=</span>"nk-code" <span class="attr">style=</span>"margin-top:12px"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"lang"<span class="tag">></span>html<span class="tag"></span</span><span class="tag">></span>&lt;nav class="nk-tab-bar fixed"&gt;…&lt;/nav&gt;&lt;div class="nk-tab-bar-spacer"&gt;&lt;/div&gt;<span class="tag"></pre</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Visible only below 860px – above, the sidebar takes over and the bar is <code>display: none</code>. <code>always</code> shows it at every width, as in this preview. On phones with a home indicator the bottom padding is the larger of 6px and <code>env(safe-area-inset-bottom)</code>, so the labels end where iOS ends its own tab bar; in landscape the side padding grows to the left/right insets (Dynamic Island) while the background still runs edge to edge.</span></div>
<div class="doc-classes"><code>.nk-tab-bar</code><code>.nk-tab-bar-item</code><code>.nk-tab-bar-spacer</code><code>.icon</code><code>.label</code><code>.active</code><code>.always</code><code>.fixed</code><code>.floating</code></div>
</article>
<article class="doc-entry" id="nk-breadcrumb">
<h3>Breadcrumb <code>.nk-breadcrumb</code></h3>
<p class="doc-desc">Each step is a <code>.crumb</code>; the last one carries <code>.current</code> and turns from secondary to primary text. Separators are <code>.sep</code>.</p>
<div class="doc-preview"><div class="nk-breadcrumb">
<span class="crumb">📊 Project overview</span><span class="sep">/</span>
<span class="crumb">📚 Knowledge base</span><span class="sep">/</span>
<span class="crumb current">🚀 Roadmap</span>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-breadcrumb"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"crumb"<span class="tag">></span>📊 Project overview<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"sep"<span class="tag">></span>/<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"crumb"<span class="tag">></span>📚 Knowledge base<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"sep"<span class="tag">></span>/<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"crumb current"<span class="tag">></span>🚀 Roadmap<span class="tag"></span</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Wraps rather than truncating. Shorten the trail server-side on small screens.</span></div>
<div class="doc-classes"><code>.nk-breadcrumb</code><code>.crumb</code><code>.sep</code><code>.current</code></div>
</article>
<article class="doc-entry" id="nk-section-label">
<h3>Section label <code>.nk-section-label</code></h3>
<p class="doc-desc">The small uppercase caption between sidebar groups. Its <code>.plus</code> affordance only appears on hover — a quiet way to keep an add action reachable without decorating the rail.</p>
<div class="doc-preview"><div style="background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:4px 8px;max-width:244px">
<div class="nk-section-label">Favourites<span class="plus">+</span></div>
<div class="nk-tree-item"><span class="icon">📊</span><span class="label">Project overview</span></div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">style=</span>"background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:4px 8px;max-width:244px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-section-label"<span class="tag">></span>Favourites<span class="tag"><span</span> <span class="attr">class=</span>"plus"<span class="tag">></span>+<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📊<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Project overview<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Hidden inside the settings nav below 860px, where the nav collapses to icons.</span></div>
<div class="doc-classes"><code>.nk-section-label</code><code>.plus</code></div>
</article>
</section>
<section class="doc-group" id="nav">
<h2>Navigation / page tree</h2>
<div class="prd">PRD 5.2</div>
<article class="doc-entry" id="nk-tree-item">
<h3>Tree item <code>.nk-tree-item</code></h3>
<p class="doc-desc">The workhorse of the sidebar. Minimum height is 28px, the label truncates with an ellipsis, and the <code>.actions</code> block stays hidden until hover. Add <code>.active</code> for the current page.</p>
<div class="doc-preview"><div style="background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px">
<div class="nk-tree-item active"><span class="icon">📊</span><span class="label">Project overview</span><span class="actions"><span>+</span><span>⋯</span></span></div>
<div class="nk-tree-item"><span class="icon">📚</span><span class="label">Knowledge base</span><span class="actions"><span>+</span><span>⋯</span></span></div>
<div class="nk-tree-item"><span class="icon">🎨</span><span class="label">Design system</span><span class="actions"><span>+</span><span>⋯</span></span></div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">style=</span>"background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item active"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📊<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Project overview<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"actions"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>+<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span><span class="tag">></span>⋯<span class="tag"></span</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📚<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Knowledge base<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"actions"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>+<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span><span class="tag">></span>⋯<span class="tag"></span</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🎨<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Design system<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"actions"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>+<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span><span class="tag">></span>⋯<span class="tag"></span</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Reaches 28px, below the 44px touch target. In a touch-first off-canvas drawer raise <code>min-height</code> on the item; the class does not force a height.</span></div>
<div class="doc-classes"><code>.nk-tree-item</code><code>.icon</code><code>.label</code><code>.actions</code><code>.active</code><code>.compact</code></div>
</article>
<article class="doc-entry" id="nk-tree-children">
<h3>Nested tree & toggle arrow <code>.nk-tree-children</code></h3>
<p class="doc-desc">Children indent under a guide line. Add <code>.collapsed</code> to fold them away and <code>.open</code> to the arrow to rotate it 90°. Both are plain state classes — the toggling is yours.</p>
<div class="doc-preview"><div style="background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px">
<div class="nk-tree-item"><span class="nk-toggle-arrow open">▶</span><span class="icon">📚</span><span class="label">Knowledge base</span></div>
<div class="nk-tree-children">
<div class="nk-tree-item"><span class="icon">📄</span><span class="label">Meeting notes</span></div>
<div class="nk-tree-item"><span class="icon">🎨</span><span class="label">Design system</span></div>
</div>
<div class="nk-tree-item"><span class="nk-toggle-arrow">▶</span><span class="icon">🗂️</span><span class="label">Pages</span></div>
<div class="nk-tree-children collapsed"><div class="nk-tree-item"><span class="label">—</span></div></div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">style=</span>"background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-toggle-arrow open"<span class="tag">></span>▶<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📚<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Knowledge base<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-children"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>📄<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Meeting notes<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🎨<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Design system<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-toggle-arrow"<span class="tag">></span>▶<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🗂️<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Pages<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-children collapsed"<span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>—<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Unchanged; the indent stays at 14px so deep trees still fit a narrow rail.</span></div>
<div class="doc-classes"><code>.nk-tree-children</code><code>.collapsed</code><code>.nk-toggle-arrow</code><code>.open</code></div>
</article>
<article class="doc-entry" id="nk-kbd">
<h3>Keyboard hint <code>.nk-kbd</code></h3>
<p class="doc-desc"><code>nk-kbd-hint</code> pushes a shortcut to the right edge of a row; <code>nk-kbd</code> is the key cap itself. Prefixed on purpose — a bare <code>kbd</code> rule would leak into the host page.</p>
<div class="doc-preview"><div style="background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px">
<div class="nk-tree-item"><span class="icon">🔍</span><span class="label">Search</span><span class="nk-kbd-hint"><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd></span></div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">style=</span>"background:var(--nk-bg-sidebar);border-radius:var(--nk-radius);padding:6px 8px;max-width:244px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-tree-item"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"icon"<span class="tag">></span>🔍<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"label"<span class="tag">></span>Search<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-kbd-hint"<span class="tag">></span><span class="tag"><kbd</span> <span class="attr">class=</span>"nk-kbd"<span class="tag">></span>⌘<span class="tag"></kbd</span><span class="tag">></span><span class="tag"><kbd</span> <span class="attr">class=</span>"nk-kbd"<span class="tag">></span>K<span class="tag"></kbd</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Keep it, but do not rely on it: touch devices have no such shortcut.</span></div>
<div class="doc-classes"><code>.nk-kbd-hint</code><code>.nk-kbd</code></div>
</article>
</section>
<section class="doc-group" id="page">
<h2>Page shell & document</h2>
<div class="prd">PRD 5.3</div>
<article class="doc-entry" id="nk-page">
<h3>Page column & page options <code>.nk-page</code></h3>
<p class="doc-desc">The document column: <code>max-width: 760px</code> with auto margins, never a fixed width. After a cover (<code>.nk-cover + .nk-page</code>, or <code>.nk-page.covered</code>) the icon pulls itself up over it with a negative margin and the page has no top padding; without one the page keeps 24px top padding and the icon sits inside it, fully visible. The title is <code>contenteditable</code>-ready. Notion's two page options are classes on the page: <code>full</code> lifts the 760px cap so the column fills the window, <code>small</code> sets the document text from 16px to 14px, and headings, lead, prose and editor follow because they are sized in em. Title, properties, tables and controls keep their size. In Notion these are options of the single page, in its ⋯ menu, not app settings. The token <code>--nk-page-full-max</code> caps <code>full</code> – <code>none</code> by default; <code>1080px</code> on <code>:root</code> gives a dashboard of tables room without 1600px lines.</p>
<div class="doc-preview is-frame" style="height:320px"><div class="nk-page-scroll" style="height:100%">
<div class="nk-cover" style="height:120px"></div>
<div class="nk-page" style="padding-bottom:24px">
<div class="nk-page-icon">🚀</div>
<h1 class="nk-page-title" contenteditable="true">Product roadmap</h1>
<div class="nk-page-meta"><span>👤 Ada Lovelace</span><span>📅 Created 12 May 2026</span></div>
<p class="lead">A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.</p>
</div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-page-scroll" <span class="attr">style=</span>"height:100%"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-cover" <span class="attr">style=</span>"height:120px"<span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-page" <span class="attr">style=</span>"padding-bottom:24px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-page-icon"<span class="tag">></span>🚀<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><h1</span> <span class="attr">class=</span>"nk-page-title" <span class="attr">contenteditable=</span>"true"<span class="tag">></span>Product roadmap<span class="tag"></h1</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-page-meta"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>👤 Ada Lovelace<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span><span class="tag">></span>📅 Created 12 May 2026<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><p</span> <span class="attr">class=</span>"lead"<span class="tag">></span>A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.<span class="tag"></p</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Side padding drops from 64px to 24px below 860px. The 760px cap simply never binds, so <code>full</code> changes nothing there; <code>small</code> still does.</span></div>
<div class="doc-classes"><code>.nk-page-scroll</code><code>.nk-page</code><code>.nk-page-icon</code><code>.nk-page-title</code><code>.nk-page-meta</code><code>.covered</code><code>.full</code><code>.small</code></div>
</article>
<article class="doc-entry" id="nk-props">
<h3>Page properties <code>.nk-props</code></h3>
<p class="doc-desc">The properties under the title of a database page – the pattern Notion is known for. One <code>.nk-prop</code> per row: the name with its type icon in a 160px column, the value beside it, both 34px tall with the hover wash, as each half opens its own editor in Notion. Values are ordinary markup: tags, an avatar with a name, a date, a <code>.nk-progress.wide</code>. It replaces <code>.nk-page-meta</code> on a page that is a row. Written as <code><dl></code>, <code><dt></code> and <code><dd></code> it is a description list for assistive technology as well; plain <code><div></code>s work the same. A value that is text – a sentence, an address, a model name with a tag – takes <code>.text</code> and flows as text instead of setting its parts one under the other. The value keeps at least 220px: in a column narrower than 380px, a side panel say, it moves under its name. <code>.flush</code> drops the outer margin, for a list inside a panel or a flex column with a gap of its own.</p>
<div class="doc-preview"><dl class="nk-props" style="max-width:520px">
<div class="nk-prop"><dt class="p-name"><span class="p-icon">◉</span>Status</dt><dd class="p-value"><span class="nk-tag blue">In progress</span></dd></div>
<div class="nk-prop"><dt class="p-name"><span class="p-icon">👤</span>Owner</dt><dd class="p-value"><span class="nk-avatar small purple">AL</span>Ada Lovelace</dd></div>
<div class="nk-prop"><dt class="p-name"><span class="p-icon">📅</span>Due</dt><dd class="p-value">2 June 2026</dd></div>
<div class="nk-prop"><dt class="p-name"><span class="p-icon">✉️</span>Address</dt><dd class="p-value text">support+design@notionkit.example.com · <span class="nk-tag green">Verified</span></dd></div>
<div class="nk-prop"><dt class="p-name"><span class="p-icon">🏷️</span>Tags</dt><dd class="p-value"><span class="nk-tag purple">Design system</span><span class="nk-tag">CSS</span></dd></div>
<div class="nk-prop"><dt class="p-name"><span class="p-icon">▰</span>Progress</dt><dd class="p-value"><span class="nk-progress wide"><i style="width:65%"></i></span><span class="nk-progress-label">65 %</span></dd></div>
</dl></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><dl</span> <span class="attr">class=</span>"nk-props" <span class="attr">style=</span>"max-width:520px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>◉<span class="tag"></span</span><span class="tag">></span>Status<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-tag blue"<span class="tag">></span>In progress<span class="tag"></span</span><span class="tag">></span><span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>👤<span class="tag"></span</span><span class="tag">></span>Owner<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-avatar small purple"<span class="tag">></span>AL<span class="tag"></span</span><span class="tag">></span>Ada Lovelace<span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>📅<span class="tag"></span</span><span class="tag">></span>Due<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value"<span class="tag">></span>2 June 2026<span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>✉️<span class="tag"></span</span><span class="tag">></span>Address<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value text"<span class="tag">></span>support+design@notionkit.example.com · <span class="tag"><span</span> <span class="attr">class=</span>"nk-tag green"<span class="tag">></span>Verified<span class="tag"></span</span><span class="tag">></span><span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>🏷️<span class="tag"></span</span><span class="tag">></span>Tags<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-tag purple"<span class="tag">></span>Design system<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-tag"<span class="tag">></span>CSS<span class="tag"></span</span><span class="tag">></span><span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-prop"<span class="tag">></span><span class="tag"><dt</span> <span class="attr">class=</span>"p-name"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"p-icon"<span class="tag">></span>▰<span class="tag"></span</span><span class="tag">></span>Progress<span class="tag"></dt</span><span class="tag">></span><span class="tag"><dd</span> <span class="attr">class=</span>"p-value"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-progress wide"<span class="tag">></span><span class="tag"><i</span> <span class="attr">style=</span>"width:65%"<span class="tag">></span><span class="tag"></i</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-progress-label"<span class="tag">></span>65 %<span class="tag"></span</span><span class="tag">></span><span class="tag"></dd</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"></dl</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Below 860px each property stacks: the name above its value, both flush left, so the value gets the whole width.</span></div>
<div class="doc-classes"><code>.nk-props</code><code>.nk-prop</code><code>.p-name</code><code>.p-icon</code><code>.p-value</code><code>.text</code><code>.flush</code></div>
</article>
<article class="doc-entry" id="nk-cover">
<h3>Cover <code>.nk-cover</code></h3>
<p class="doc-desc">A decorative band above the page, 200px tall – the token <code>--nk-cover-height</code>, on <code>:root</code> or on one cover; Notion's own takes about 30vh, <code>clamp(200px, 30vh, 300px)</code> comes close. Three radial gradients mixed from the <code>--nk-decor-*</code> tokens over <code>--nk-bg-callout</code>. For a picture put an <code><img></code> inside: it fills the band and is cropped, never stretched, and <code>object-position</code> moves the crop, as Notion's “Reposition” does. The gradient stays underneath while it loads.</p>
<div class="doc-preview"><div class="nk-cover" style="border-radius:var(--nk-radius)"></div>
<div class="nk-cover" style="height:120px;border-radius:var(--nk-radius);margin-top:12px"><img src="covers/meadow.svg" alt=""></div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-cover" <span class="attr">style=</span>"border-radius:var(--nk-radius)"<span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-cover" <span class="attr">style=</span>"height:120px;border-radius:var(--nk-radius);margin-top:12px"<span class="tag">></span><span class="tag"><img</span> <span class="attr">src=</span>"covers/meadow.svg" <span class="attr">alt=</span>""<span class="tag">></span><span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Full bleed, as tall as <code>--nk-cover-height</code>; lower the token if the band eats too much of a short screen. Without a page icon the page keeps its top padding under the cover.</span></div>
<div class="doc-classes"><code>.nk-cover</code></div>
</article>
<article class="doc-entry" id="nk-heading">
<h3>Headings & lead <code>.nk-heading</code></h3>
<p class="doc-desc"><code>nk-heading</code> is the in-document section heading — a flex row, so an emoji sits on the baseline without extra markup. <code>p.lead</code> is the larger intro paragraph inside <code>nk-page</code>.</p>
<div class="doc-preview"><div class="nk-page" style="padding:0;max-width:none">
<h2 class="nk-heading">✅ How this works</h2>
<p class="lead">A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.</p>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-page" <span class="attr">style=</span>"padding:0;max-width:none"<span class="tag">></span>
<span class="tag"><h2</span> <span class="attr">class=</span>"nk-heading"<span class="tag">></span>✅ How this works<span class="tag"></h2</span><span class="tag">></span>
<span class="tag"><p</span> <span class="attr">class=</span>"lead"<span class="tag">></span>A short lead paragraph sets up the page in a calmer, larger type size before the body copy begins.<span class="tag"></p</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Unchanged. The page title stays 40px; override it if that is too loud on a phone.</span></div>
<div class="doc-classes"><code>.nk-heading</code><code>.lead</code></div>
</article>
</section>
<section class="doc-group" id="content">
<h2>Content elements</h2>
<div class="prd">PRD 5.4</div>
<article class="doc-entry" id="nk-callout">
<h3>Callout <code>.nk-callout</code></h3>
<p class="doc-desc">A tinted block for the one thought that must not be missed. The icon is a <code>.c-icon</code> child and has a <code>::slotted()</code> twin, so <code><nk-callout></code> can accept it through a slot.</p>
<div class="doc-preview"><div class="nk-callout"><span class="c-icon">💡</span><div><b>Core idea:</b> a callout carries one thought that should not be missed. Keep it to a sentence or two.</div></div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-callout"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"c-icon"<span class="tag">></span>💡<span class="tag"></span</span><span class="tag">></span><span class="tag"><div</span><span class="tag">></span><span class="tag"><b</span><span class="tag">></span>Core idea:<span class="tag"></b</span><span class="tag">></span> a callout carries one thought that should not be missed. Keep it to a sentence or two.<span class="tag"></div</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Flows naturally; the icon stays on the first line because the row is <code>align-items: flex-start</code>.</span></div>
<div class="doc-classes"><code>.nk-callout</code><code>.c-icon</code></div>
</article>
<article class="doc-entry" id="nk-bookmark">
<h3>Bookmark <code>.nk-bookmark</code></h3>
<p class="doc-desc">Notion's link block: <code>.bm-title</code>, two lines of <code>.bm-desc</code> and the <code>.bm-url</code> with its <code>.bm-favicon</code> on the left, the preview image in <code>.bm-cover</code> on the right – a third of the box, 240px at most, so a 1200×630 <code>og:image</code> fits nearly whole. The whole box is the link, an <code><a></code>; fill it from the page's <code>og:title</code>, <code>og:description</code> and <code>og:image</code>. Without an image the text takes the width, without a description the box gets lower. Also the way to show how a shared link will look.</p>
<div class="doc-preview"><a class="nk-bookmark" href="https://notionkit.jungherz.com" target="_blank" rel="noopener" style="max-width:600px">
<span class="bm-text">
<span class="bm-title">NotionKit – the calm workspace look as CSS</span>
<span class="bm-desc">NotionKit is a pure CSS component library in the Notion idiom: sidebar, page tree, document shell, database views, settings and AI surfaces.</span>
<span class="bm-url"><img class="bm-favicon" src="favicon.svg" alt=""><span>https://notionkit.jungherz.com</span></span>
</span>
<span class="bm-cover"><img src="covers/notionkit-og.jpg" alt=""></span>
</a></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><a</span> <span class="attr">class=</span>"nk-bookmark" <span class="attr">href=</span>"https://notionkit.jungherz.com" <span class="attr">target=</span>"_blank" <span class="attr">rel=</span>"noopener" <span class="attr">style=</span>"max-width:600px"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"bm-text"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"bm-title"<span class="tag">></span>NotionKit – the calm workspace look as CSS<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"bm-desc"<span class="tag">></span>NotionKit is a pure CSS component library in the Notion idiom: sidebar, page tree, document shell, database views, settings and AI surfaces.<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"bm-url"<span class="tag">></span><span class="tag"><img</span> <span class="attr">class=</span>"bm-favicon" <span class="attr">src=</span>"favicon.svg" <span class="attr">alt=</span>""<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>https://notionkit.jungherz.com<span class="tag"></span</span><span class="tag">></span><span class="tag"></span</span><span class="tag">></span>
<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"bm-cover"<span class="tag">></span><span class="tag"><img</span> <span class="attr">src=</span>"covers/notionkit-og.jpg" <span class="attr">alt=</span>""<span class="tag">></span><span class="tag"></span</span><span class="tag">></span>
<span class="tag"></a</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>The image keeps its third and is cropped at the centre; title and address end in an ellipsis, the description in two lines.</span></div>
<div class="doc-classes"><code>.nk-bookmark</code><code>.bm-text</code><code>.bm-title</code><code>.bm-desc</code><code>.bm-url</code><code>.bm-favicon</code><code>.bm-cover</code></div>
</article>
<article class="doc-entry" id="nk-todo">
<h3>To-do <code>.nk-todo</code></h3>
<p class="doc-desc">A checkbox with a custom checkmark. The sibling selector <code>input:checked + span</code> strikes the label through — both halves live inside one component, so it survives the move into a shadow root.</p>
<div class="doc-preview"><div>
<label class="nk-todo"><input type="checkbox" checked><span>Sketch the component scope</span></label>
<label class="nk-todo"><input type="checkbox" checked><span>Build the preview</span></label>
<label class="nk-todo"><input type="checkbox"><span>Prioritise the MVP</span></label>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span><span class="tag">></span>
<span class="tag"><label</span> <span class="attr">class=</span>"nk-todo"<span class="tag">></span><span class="tag"><input</span> <span class="attr">type=</span>"checkbox" checked<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>Sketch the component scope<span class="tag"></span</span><span class="tag">></span><span class="tag"></label</span><span class="tag">></span>
<span class="tag"><label</span> <span class="attr">class=</span>"nk-todo"<span class="tag">></span><span class="tag"><input</span> <span class="attr">type=</span>"checkbox" checked<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>Build the preview<span class="tag"></span</span><span class="tag">></span><span class="tag"></label</span><span class="tag">></span>
<span class="tag"><label</span> <span class="attr">class=</span>"nk-todo"<span class="tag">></span><span class="tag"><input</span> <span class="attr">type=</span>"checkbox"<span class="tag">></span><span class="tag"><span</span><span class="tag">></span>Prioritise the MVP<span class="tag"></span</span><span class="tag">></span><span class="tag"></label</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>The 16px box is below the touch minimum. Wrap it in a <code><label></code> so the whole row is tappable.</span></div>
<div class="doc-classes"><code>.nk-todo</code></div>
</article>
<article class="doc-entry" id="nk-toggle">
<h3>Toggle <code>.nk-toggle</code></h3>
<p class="doc-desc">Built on native <code><details></code>/<code><summary></code>, so it opens and closes without a line of JavaScript. The marker is a <code>::before</code> that rotates on <code>[open]</code>.</p>
<div class="doc-preview"><details class="nk-toggle" open>
<summary>What is not included?</summary>
<div class="toggle-body">The text editor itself. NotionKit ships the optical shell; you mount TipTap, BlockNote or Novel inside it.</div>
</details></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><details</span> <span class="attr">class=</span>"nk-toggle" open<span class="tag">></span>
<span class="tag"><summary</span><span class="tag">></span>What is not included?<span class="tag"></summary</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"toggle-body"<span class="tag">></span>The text editor itself. NotionKit ships the optical shell; you mount TipTap, BlockNote or Novel inside it.<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></details</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>The summary row is comfortably tappable. Native behaviour on all platforms.</span></div>
<div class="doc-classes"><code>.nk-toggle</code><code>.toggle-body</code></div>
</article>
<article class="doc-entry" id="nk-quote">
<h3>Quote & divider <code>.nk-quote</code></h3>
<p class="doc-desc">A block quote with a solid left rule, plus the horizontal divider. <code>nk-divider</code> is meant for an <code><hr></code> and resets the element’s own border.</p>
<div class="doc-preview"><blockquote class="nk-quote">Design is not just what it looks like. Design is how it works.<cite class="q-cite">— Steve Jobs</cite></blockquote>
<hr class="nk-divider"></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><blockquote</span> <span class="attr">class=</span>"nk-quote"<span class="tag">></span>Design is not just what it looks like. Design is how it works.<span class="tag"><cite</span> <span class="attr">class=</span>"q-cite"<span class="tag">></span>— Steve Jobs<span class="tag"></cite</span><span class="tag">></span><span class="tag"></blockquote</span><span class="tag">></span>
<span class="tag"><hr</span> <span class="attr">class=</span>"nk-divider"<span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Unchanged.</span></div>
<div class="doc-classes"><code>.nk-quote</code><code>.q-cite</code><code>.nk-divider</code></div>
</article>
<article class="doc-entry" id="nk-mention">
<h3>Inline mentions <code>.nk-mention</code></h3>
<p class="doc-desc">Three variants inside running text: <code>.person</code> with a mini avatar, <code>.page</code> underlined in a hairline, <code>.date</code> in the orange tag colour. All are <code>inline-flex</code> and never break mid-mention.</p>
<div class="doc-preview"><p style="line-height:1.9">
<span class="nk-mention person"><span class="nk-avatar purple">SL</span>Sara Lindt</span>
<span class="nk-mention page">📄 Knowledge base</span>
<span class="nk-mention date">📅 20 May</span>
</p></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><p</span> <span class="attr">style=</span>"line-height:1.9"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"nk-mention person"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"nk-avatar purple"<span class="tag">></span>SL<span class="tag"></span</span><span class="tag">></span>Sara Lindt<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"nk-mention page"<span class="tag">></span>📄 Knowledge base<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"nk-mention date"<span class="tag">></span>📅 20 May<span class="tag"></span</span><span class="tag">></span>
<span class="tag"></p</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span><code>white-space: nowrap</code> keeps each mention whole; the paragraph wraps around it.</span></div>
<div class="doc-classes"><code>.nk-mention</code><code>.person</code><code>.page</code><code>.date</code><code>.mini-avatar</code></div>
</article>
<article class="doc-entry" id="nk-code">
<h3>Code <code>.nk-code</code></h3>
<p class="doc-desc">A block with a language badge in the corner and two colour hooks — <code>.tag</code> takes the accent, <code>.attr</code> the orange tag colour. <code>nk-inline-code</code> is the in-sentence variant.</p>
<div class="doc-preview"><div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-callout"<span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"c-icon"<span class="tag">></span>💡<span class="tag"></span></span>
<span class="tag"></div></span></div>
<p>Inline: <code class="nk-inline-code">--nk-accent</code></p></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-code"<span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"lang"<span class="tag">></span>html<span class="tag"></span</span><span class="tag">></span><span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&lt;div<span class="tag"></span</span><span class="tag">></span> <span class="tag"><span</span> <span class="attr">class=</span>"attr"<span class="tag">></span>class=<span class="tag"></span</span><span class="tag">></span>"nk-callout"<span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&gt;<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&lt;span<span class="tag"></span</span><span class="tag">></span> <span class="tag"><span</span> <span class="attr">class=</span>"attr"<span class="tag">></span>class=<span class="tag"></span</span><span class="tag">></span>"c-icon"<span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&gt;<span class="tag"></span</span><span class="tag">></span>💡<span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&lt;/span&gt;<span class="tag"></span</span><span class="tag">></span>
<span class="tag"><span</span> <span class="attr">class=</span>"tag"<span class="tag">></span>&lt;/div&gt;<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><p</span><span class="tag">></span>Inline: <span class="tag"><code</span> <span class="attr">class=</span>"nk-inline-code"<span class="tag">></span>--nk-accent<span class="tag"></code</span><span class="tag">></span><span class="tag"></p</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span><code>white-space: pre</code> plus <code>overflow-x: auto</code>: long lines scroll inside the block instead of pushing the page sideways.</span></div>
<div class="doc-classes"><code>.nk-code</code><code>.lang</code><code>.tag</code><code>.attr</code><code>.nk-inline-code</code></div>
</article>
<article class="doc-entry" id="nk-prose">
<h3>Prose <code>.nk-prose</code></h3>
<p class="doc-desc">Text the app did not write tag by tag – rendered Markdown, help pages, the HTML an editor saved – takes the document look from one class on its container: headings, paragraphs, lists, task lists, links, inline code, code blocks, quotes, rules, pictures and tables. It reads the very same rules as the editor adapter, so a page shown for reading and the same page in TipTap match to the pixel. Sizes are in em and follow what the text sits in: 16px on a page, 14px with <code>small</code> or in the app chrome. No outer margin on the first and last block, so it sits flush in a panel. An empty paragraph keeps its line, as it had it in the editor.</p>
<div class="doc-preview"><div class="nk-page" style="padding:0;max-width:560px;margin:0"><div class="nk-prose">
<h2>Release notes</h2>
<p>Rendered Markdown takes the document look from <strong>one class</strong>: headings, lists, <a href="#">links</a>, <code>code</code>, quotes and tables.</p>
<ul><li>Paragraphs and lists keep Notion’s spacing</li><li>Sizes follow the page – 16px, or 14px with <code>small</code></li></ul>
<blockquote>The editor adapter reads the same rules.</blockquote>
<table><thead><tr><th>Class</th><th>For</th></tr></thead><tbody><tr><td><code>full</code></td><td>Full width</td></tr><tr><td><code>small</code></td><td>Small text</td></tr></tbody></table>
</div></div></div>
<p class="doc-note doc-note--preview">Class only, on purpose: <code>::slotted()</code> reaches the slotted node and never a paragraph inside it, so a <code><nk-prose></code> element could not style its content. Put the class on a light-DOM container, also inside NotionKit Elements.</p>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-page" <span class="attr">style=</span>"padding:0;max-width:560px;margin:0"<span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"nk-prose"<span class="tag">></span>
<span class="tag"><h2</span><span class="tag">></span>Release notes<span class="tag"></h2</span><span class="tag">></span>
<span class="tag"><p</span><span class="tag">></span>Rendered Markdown takes the document look from <span class="tag"><strong</span><span class="tag">></span>one class<span class="tag"></strong</span><span class="tag">></span>: headings, lists, <span class="tag"><a</span> <span class="attr">href=</span>"#"<span class="tag">></span>links<span class="tag"></a</span><span class="tag">></span>, <span class="tag"><code</span><span class="tag">></span>code<span class="tag"></code</span><span class="tag">></span>, quotes and tables.<span class="tag"></p</span><span class="tag">></span>
<span class="tag"><ul</span><span class="tag">></span><span class="tag"><li</span><span class="tag">></span>Paragraphs and lists keep Notion’s spacing<span class="tag"></li</span><span class="tag">></span><span class="tag"><li</span><span class="tag">></span>Sizes follow the page – 16px, or 14px with <span class="tag"><code</span><span class="tag">></span>small<span class="tag"></code</span><span class="tag">></span><span class="tag"></li</span><span class="tag">></span><span class="tag"></ul</span><span class="tag">></span>
<span class="tag"><blockquote</span><span class="tag">></span>The editor adapter reads the same rules.<span class="tag"></blockquote</span><span class="tag">></span>
<span class="tag"><table</span><span class="tag">></span><span class="tag"><thead</span><span class="tag">></span><span class="tag"><tr</span><span class="tag">></span><span class="tag"><th</span><span class="tag">></span>Class<span class="tag"></th</span><span class="tag">></span><span class="tag"><th</span><span class="tag">></span>For<span class="tag"></th</span><span class="tag">></span><span class="tag"></tr</span><span class="tag">></span><span class="tag"></thead</span><span class="tag">></span><span class="tag"><tbody</span><span class="tag">></span><span class="tag"><tr</span><span class="tag">></span><span class="tag"><td</span><span class="tag">></span><span class="tag"><code</span><span class="tag">></span>full<span class="tag"></code</span><span class="tag">></span><span class="tag"></td</span><span class="tag">></span><span class="tag"><td</span><span class="tag">></span>Full width<span class="tag"></td</span><span class="tag">></span><span class="tag"></tr</span><span class="tag">></span><span class="tag"><tr</span><span class="tag">></span><span class="tag"><td</span><span class="tag">></span><span class="tag"><code</span><span class="tag">></span>small<span class="tag"></code</span><span class="tag">></span><span class="tag"></td</span><span class="tag">></span><span class="tag"><td</span><span class="tag">></span>Small text<span class="tag"></td</span><span class="tag">></span><span class="tag"></tr</span><span class="tag">></span><span class="tag"></tbody</span><span class="tag">></span><span class="tag"></table</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Flows with the column; a wide table scrolls in its own box instead of widening the page.</span></div>
<div class="doc-classes"><code>.nk-prose</code></div>
</article>
</section>
<section class="doc-group" id="database">
<h2>Database views</h2>
<div class="prd">PRD 5.5</div>
<article class="doc-entry" id="nk-db-tabs">
<h3>View tabs <code>.nk-db-tabs</code></h3>
<p class="doc-desc">The strip above a database. The active view sits on the active wash as a pill, the others are plain words — no underline, no rule, as in Notion since 2025. The <code>.badge</code> child carries the row count.</p>
<div class="doc-preview"><div class="nk-database">
<div class="nk-db-tabs">
<div class="nk-db-tab active">▦ Table<span class="badge">4</span></div>
<div class="nk-db-tab">▤ Board</div>
<div class="nk-db-tab">🖼 Gallery</div>
</div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-database"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tabs"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab active"<span class="tag">></span>▦ Table<span class="tag"><span</span> <span class="attr">class=</span>"badge"<span class="tag">></span>4<span class="tag"></span</span><span class="tag">></span><span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab"<span class="tag">></span>▤ Board<span class="tag"></div</span><span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab"<span class="tag">></span>🖼 Gallery<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span></div>
<div class="doc-meta"><b>On a small screen:</b><span>Add <code>overflow-x: auto</code> to the strip when you have more than three or four views.</span></div>
<div class="doc-classes"><code>.nk-database</code><code>.nk-db-tabs</code><code>.nk-db-tab</code><code>.active</code><code>.badge</code></div>
</article>
<article class="doc-entry" id="nk-db-toolbar">
<h3>Toolbar & filter pills <code>.nk-db-toolbar</code></h3>
<p class="doc-desc">The database header as Notion lays it out: view tabs on the left, the view's tools on the right – <code>.nk-db-tool</code> buttons for Filter, Sort and search, then “New”. A tool in effect takes <code>.active</code>, the accent. Under it, <code>.nk-filter-row</code> holds the filters in effect as <code>.nk-filter-pill</code>s – <code>.active</code> with an accent tint – and a quiet <code>.add</code> pill at the end. A pill is one button, or a box with the label button and a <code>.fp-remove</code> × when a filter can be removed in place.</p>
<div class="doc-preview"><div class="nk-database" style="max-width:620px">
<div class="nk-db-toolbar">
<div class="nk-db-tabs">
<div class="nk-db-tab active">▦ Table</div><div class="nk-db-tab">▤ Board</div><div class="nk-db-tab">☰ List</div>
</div>
<div class="tools">
<button class="nk-db-tool active">Filter</button><button class="nk-db-tool">Sort</button><button class="nk-db-tool" aria-label="Search">🔍</button>
<button class="nk-btn primary small">New</button>
</div>
</div>
<div class="nk-filter-row">
<span class="nk-filter-pill active"><button>Status: Open</button><button class="fp-remove" aria-label="Remove filter">×</button></span>
<button class="nk-filter-pill">Owner: Marcel ▾</button>
<button class="nk-filter-pill add">+ Filter</button>
</div>
</div></div>
<div class="nk-code"><span class="lang">html</span><span class="tag"><div</span> <span class="attr">class=</span>"nk-database" <span class="attr">style=</span>"max-width:620px"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-toolbar"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tabs"<span class="tag">></span>
<span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab active"<span class="tag">></span>▦ Table<span class="tag"></div</span><span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab"<span class="tag">></span>▤ Board<span class="tag"></div</span><span class="tag">></span><span class="tag"><div</span> <span class="attr">class=</span>"nk-db-tab"<span class="tag">></span>☰ List<span class="tag"></div</span><span class="tag">></span>
<span class="tag"></div</span><span class="tag">></span>