notion-arena

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/SynergyFlowLabs/notion-arena)
[![npm version](https://img.shields.io/badge/npm-notion--arena--mcp%400.2.2-blue?logo=npm)](https://www.npmjs.com/package/notion-arena-mcp)
[![MCP Registry](https://img.shields.io/badge/MCP%20Registry-io.github.imgul%2Fnotion--arena%400.2.2-purple)](https://registry.modelcontextprotocol.io)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/SynergyFlowLabs/notion-arena/blob/main/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/SynergyFlowLabs/notion-arena/blob/main/CONTRIBUTING.md)
[![Discord](https://img.shields.io/badge/Discord-join-7289da?logo=discord)](https://discord.gg/notion-arena)

# Notion Arena

<p align="center">
  <img src="public/assets/og/hero-banner.png" alt="Notion Arena Hero" width="100%" max-width="900"/>
</p>

<p align="center">
  <strong>The component registry for Notion.</strong><br/>
  shadcn/ui's model: browse, configure, copy, own, install from code — applied to Notion dashboards.
</p>

<p align="center">
  <img src="public/assets/icons/widget-badge.svg" alt="132 Widgets" height="28"/>
  <img src="public/assets/icons/recipe-badge.svg" alt="11 Recipes" height="28"/>
  <img src="public/assets/icons/mcp-badge.svg" alt="MCP Ready" height="28" style="margin-left: 8px;"/>
  <img src="public/assets/icons/skill-badge.svg" alt="Skill Enabled" height="28" style="margin-left: 8px;"/>
</p>

<p align="center">
  <img src="public/assets/badges/category-time.svg" alt="Time" height="24"/>
  <img src="public/assets/badges/category-dashboards.svg" alt="Dashboards" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-trackers.svg" alt="Trackers" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-planning.svg" alt="Planning" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-business.svg" alt="Business" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-docs.svg" alt="Docs" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-visuals.svg" alt="Visuals" height="24" style="margin-left: 4px;"/>
  <img src="public/assets/badges/category-automations.svg" alt="Automations" height="24" style="margin-left: 4px;"/>
</p>

---

## 🎯 What is Notion Arena?

Notion Arena is a **machine-readable component registry** for Notion — 143 pre-built components you can drop into any Notion page:

| | **132 Widgets** (Embed + HTML Block) | **11 Native Recipes** (Notion API) |
|---|---|---|
| **What** | Self-contained HTML files that run inside Notion | Database schemas, views, formulas, automations installed via API |
| **Delivery** | `<iframe>` embed or upload HTML file | `POST /api/install` with your token |
| **Network** | Required (embed) / None (HTML block) | None at runtime |
| **Data** | Browser-local only | Lives in your Notion workspace |
| **Team sync** | ❌ No | ✅ Yes |
| **Updates** | Auto (embed) / Manual (HTML) | Re-run install |
| **Min plan** | Free | Free / Plus / Business |

> **Notion is a trademark of Notion Labs Inc.** This is an independent project and is not affiliated with or endorsed by Notion.

---

## 🎨 Popular Widgets Showcase

<p align="center">
  <img src="public/assets/showcase/popular-widgets.svg" alt="Popular Widgets" width="100%" max-width="900"/>
</p>

| Widget | Category | Description |
|--------|----------|-------------|
| <img src="public/assets/badges/badge-popular.svg" height="20"/> **Pomodoro Timer** | <img src="public/assets/badges/category-time.svg" height="20"/> Time | Work/break cycles with progress ring, session counter, chime |
| <img src="public/assets/badges/badge-popular.svg" height="20"/> **KPI Strip** | <img src="public/assets/badges/category-dashboards.svg" height="20"/> Dashboards | 4 metric tiles with sparklines, deltas, target rings |
| <img src="public/assets/badges/badge-popular.svg" height="20"/> **Habit Grid** | <img src="public/assets/badges/category-trackers.svg" height="20"/> Trackers | GitHub-style heatmap, streaks, 5-level intensity |
| <img src="public/assets/badges/badge-staff-pick.svg" height="20"/> **Flip Clock** | <img src="public/assets/badges/category-dashboards.svg" height="20"/> Dashboards | Split-flap clock, timezone, 12/24h, Notion typography |
| <img src="public/assets/badges/badge-staff-pick.svg" height="20"/> **Meeting Notes OS** | <img src="public/assets/badges/category-docs.svg" height="20"/> Docs | Template with agenda, notes, decisions, action items |
| **Goal Ring** | <img src="public/assets/badges/category-dashboards.svg" height="20"/> Dashboards | Single-metric hero with milestones & progress ring |

<details>
<summary><strong>📦 All 132 Widgets (click to expand)</strong></summary>

| Category | Count | Examples |
|----------|-------|----------|
| <img src="public/assets/icons/category-time.svg" height="18"/> **Time** | 18 | Pomodoro, Breathing, Stopwatch, Countdown, Month Calendar, Date Calculator, Flip Clock, World Clock, Count-Up, Interval Timer, White Noise, Sunrise/Sunset, Sleep Duration, Family Calendar, Study Session Log, Daily Planner, Routine Checklist, Workout Tracker |
| <img src="public/assets/icons/category-dashboards.svg" height="18"/> **Dashboards** | 14 | KPI Strip, Goal Ring, Year Progress, Moon Phase, Flip Clock, World Clock, Weekly Status Report, Sunrise/Sunset, Count-Up, Countdown, Month Calendar, Date Calculator, Stopwatch, Breathing Timer |
| <img src="public/assets/icons/category-trackers.svg" height="18"/> **Trackers** | 19 | Habit Grid, Water Tracker, Mood Tracker, Routine Checklist, Workout Tracker, Sleep Duration, Plant Care Log, Pet Care Checklist, Volunteer Hours Log, Media Watchlist, Reading Progress, Savings Goal, Net Worth Snapshot, Expense Tracker, Portfolio Tracker, Debt Payoff Tracker, Subscription Tracker, Billable Time Tracker, Invoice Generator |
| <img src="public/assets/icons/category-planning.svg" height="18"/> **Planning** | 17 | Mini Kanban, Eisenhower Matrix, Gantt Timeline, Weekly Planner, Trip Itinerary, Meal Planner, Grocery List, Packing List, Chore Checklist, Home Maintenance Log, Product Roadmap, Sprint Retrospective, User Story Map, OKR Weekly Check-in, Daily Planner, Wedding Seating Planner, Event Run of Show |
| <img src="public/assets/icons/category-business.svg" height="18"/> **Business** | 22 | ROI Calculator, Budget Planner, Inventory Tracker, Local Intake Form, Ticket Queue, Asset Checkout, Subscription Tracker, Bill Splitter, Currency Converter, Quote Builder, CRM Pipeline, Sprint Tracker, Invoice Generator, Client Onboarding Tracker, Sales Follow-up Queue, Campaign Planner, Interview Scorecard, Pricing Tier Calculator, Customer QBR Prep, Freelancer Proposal Tracker, Fundraising Outreach Tracker, Vendor Register, Access Review Log |
| <img src="public/assets/icons/category-docs.svg" height="18"/> **Docs** | 18 | Citation Builder, Reading Tracker, Spaced Repetition, Flashcards, Vocabulary Trainer, Bookmark Library, Reading List, Assignment Tracker, Exam Planner, Research Log, Protocol Checklist, Idea Inbox, Manuscript Progress, Chapter Outliner, Character Bible, Submission Tracker, Podcast Episode Planner, Guest Prep Sheet, Episode Production Checklist, Lesson Plan Builder, Research Conference Planner, Changelog Builder, SEO Content Planner, Content Repurposing Tracker |
| <img src="public/assets/icons/category-visuals.svg" height="18"/> **Visuals** | 6 | Org Chart, Whiteboard, Quote Card, Daily Quote Card, Film Shot List, Media Watchlist |
| <img src="public/assets/icons/category-automations.svg" height="18"/> **Automations** | 1 | Automation Starter Pack |

</details>

---

## ⚙️ Native Recipes (11)

<p align="center">
  <img src="public/assets/showcase/native-recipes.svg" alt="Native Recipes" width="100%" max-width="900"/>
</p>

| Recipe | Tier | Creates | Plan |
|--------|------|---------|------|
| **CRM Pipeline** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 3 DBs, 6 formulas, 5 views, 2 templates, 3 automations | Plus |
| **Sprint Tracker** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 2 DBs, 4 formulas, 4 views, 1 template | Plus |
| **OKR System** | <img src="public/assets/badges/tier-free.svg" height="20"/> Free | 2 DBs, 5 formulas, 3 views, 1 template | Plus |
| **Meeting Notes OS** | <img src="public/assets/badges/tier-free.svg" height="20"/> Free | 2 DBs, 1 template, 2 buttons, 4 views, 2 automations | Free |
| **Content Calendar** | <img src="public/assets/badges/tier-free.svg" height="20"/> Free | 2 DBs, 3 formulas, 5 views, 1 recurring template | Plus |
| **Invoice Generator** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 3 DBs, 6 formulas, 1 template, 1 button, 3 views | Plus |
| **PARA Life OS** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 5 DBs, 7 relations, 6 views, 3 templates, 1 dashboard | Plus |
| **Habit OS (native)** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 2 DBs, 5 formulas, 4 views, 1 button, 1 recurring | Plus |
| **Client Portal** | <img src="public/assets/badges/tier-pro.svg" height="20"/> Pro | 3 DBs, 4 views, 1 synced block, 1 page, 2 automations | Business |
| **Job Tracker** | <img src="public/assets/badges/tier-free.svg" height="20"/> Free | 2 DBs, 4 formulas, 4 views, 3 templates | Free |
| **Automation Starter** | <img src="public/assets/badges/tier-free.svg" height="20"/> Free | 2 DBs, 12 automations, 6 buttons, 3 recurring, 4 formulas | Plus |

---

## 🤖 For AI Agents — MCP + Skill

Plug Notion Arena directly into your AI agent — **Claude Code, Cursor, Windsurf, Claude Desktop**.

### MCP Server
Gives your agent tools to list/search/configure/plan-install all 143 components:

```bash
# Claude Code (project scope)
claude mcp add --scope project notion-arena -