Products
Site profile

Notion

Platform
Web
References
240
Category
Interface research
Visit website
SectionsComponents

Showing15 components

Clean-room component kit

A working Notion interface system

Fifteen clean-room React recreations traced to recurring patterns in the archived Notion desktop experience. Start with a complete screen or copy an individual container, row, menu, property, or block.

ReactTailwind-readyResponsiveWorking interactions
15 components

The layout, spacing, hierarchy, and behavior are clean-room recreations reviewed against the linked archive screens. The examples use original UIAIdol content and code—not recovered Notion source.

Interactive preview01

Enterprise search

Find anything with one search.

Find answers across documents, projects, and connected tools.

Ordered primary Enterprise search

A clean-room 768 × 273 recreation aligned to the verified ordered primary section for Notion.

Reference ↗
Interactive preview02
Home

Good afternoon

Recently visited
Upcoming events

Today · 2:00 PMProduct critique

Tomorrow · 9:30 AMWeekly planning

My tasks

Workspace home

A faithful desktop home composition with persistent navigation, recent pages, upcoming events, and an interactive task list.

Reference ↗
Interactive preview03
Private
Teamspaces

Workspace sidebar

A collapsible navigation rail with workspace switching, destination states, nested pages, and a new-page action.

Reference ↗
Interactive preview04
WorkspaceUpcoming events
Today · 2:00 PMProduct critiqueDesign team

Section container

The quiet bordered surface used to group recent pages, tasks, events, templates, and other home modules.

Reference ↗
Interactive preview05

Recent page card

A compact recent-page card with cover tone, page icon, timestamp, selected state, and a working overflow action.

Reference ↗
Interactive preview06
Review launch briefJul 18, 2026M

Task row

A dense workspace task row with completion, date, assignee, and a status control that cycles through states.

Reference ↗
Interactive preview07
Today
↑↓ Navigate↵ Open⌘ ↵ New tab

Quick find dialog

A centered global-search surface with live filtering, date groups, selected-result preview, keyboard navigation, and an empty state.

Reference ↗
Interactive preview08
Team / Projects

Team

▦ Table
NameRoleStatusPerson

Project database

A responsive table composition with page chrome, selectable records, status and role properties, filtering, and row creation.

Reference ↗
Interactive preview09

Database filter

A composable property filter with field, operator, multi-select values, clear action, and an add-rule affordance.

Reference ↗
Interactive preview10
General / Docs / Product brief
Created by◉ MayaCreated timeJuly 17, 2026TagsProduct

A single place to capture product decisions.

Keep the brief clear, useful, and easy to scan.

Block page editor

A focused document canvas with breadcrumb chrome, title, editable blocks, a working checklist, and block insertion.

Reference ↗
Interactive preview11
Basic blocks
Type to filteresc

Slash command menu

A searchable block inserter with active keyboard state, block descriptions, and a selected-command result.

Reference ↗
Interactive preview12
Properties

Choose what appears in this view.

Properties popover

A reusable view-properties menu for toggling visible metadata and adding a new property.

Reference ↗
Interactive preview13

Status property

An inline status property with a dropdown, grouped colors, selection state, and a clear action.

Reference ↗
Interactive preview14

Use a callout to keep an important decision visible to the team.

Callout block

An editable callout block with icon control and switchable background tones for emphasizing supporting content.

Reference ↗
Interactive preview15

What can I help with?

AI request composer

A working assistant surface with prompt entry, source toggles, suggested actions, submitted-message state, and reset.

Reference ↗