---
name: "@nteract"
slug: "nteract"
description: "A React component library and design system for building interactive computational notebook interfaces, powering the nteract desktop editor (built with Tauri). Provides 15 Cell components (Markdown Cell, Code Cell, Cell Controls, Cell Header, Collaborator Avatars, Execution Count, Execution Status, Play Button, etc.), 9 Output renderers (ANSI, HTML, Image, SVG, Markdown, JSON, Media Router, Isolated Frame), and 50+ Jupyter Widget protocol components including ipycanvas, AnyWidget, and built-in controls. Uses shadcn/ui patterns; state management via useSyncExternalStore for React 18/19 compatibility; CodeMirror editor with Jupyter keybindings. Free, open source. Use for: building custom notebook UIs, REPL interfaces, or Jupyter-compatible front-ends in React."
category: "Editor (rich text/code)"
tags: ["buttons", "cards", "components", "design-system", "editor", "forms", "icons", "media"]
framework: "react"
license: "BSD-3-Clause"
author: "runtimed"
website: "https://nteract-elements.vercel.app/"
github: "https://github.com/runtimed/runt"
registry: "https://nteract-elements.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 140
component_count: 35
generated_at: "2026-07-28T08:00:50.948Z"
---

# @nteract

A React component library and design system for building interactive computational notebook interfaces, powering the nteract desktop editor (built with Tauri). Provides 15 Cell components (Markdown Cell, Code Cell, Cell Controls, Cell Header, Collaborator Avatars, Execution Count, Execution Status, Play Button, etc.), 9 Output renderers (ANSI, HTML, Image, SVG, Markdown, JSON, Media Router, Isolated Frame), and 50+ Jupyter Widget protocol components including ipycanvas, AnyWidget, and built-in controls. Uses shadcn/ui patterns; state management via useSyncExternalStore for React 18/19 compatibility; CodeMirror editor with Jupyter keybindings. Free, open source. Use for: building custom notebook UIs, REPL interfaces, or Jupyter-compatible front-ends in React.

## Links

- Website: https://nteract-elements.vercel.app/
- GitHub: https://github.com/runtimed/runt
- Registry JSON: https://nteract-elements.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/nteract
- This file: https://sh4dcn.vercel.app/md/nteract.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
bunx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/runtimed/runt.git
# fetch the raw registry index
curl -s https://nteract-elements.vercel.app/r/registry.json
```

## Components (35)

| name | type | description | install |
| --- | --- | --- | --- |
| ansi-output | registry:component | Components for rendering ANSI escape sequences as colored text in notebook outputs. Includes AnsiOutput, AnsiStreamOutput, and AnsiErrorOutput variants. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/ansi-output.json` |
| image-output | registry:component | Component for rendering images in notebook outputs. Handles base64-encoded image data from Jupyter kernels as well as regular URLs. Supports PNG, JPEG, GIF, an… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/image-output.json` |
| html-output | registry:component | Component for rendering HTML content in notebook outputs. Handles pandas DataFrames, rich HTML displays, and interactive visualizations. Requires iframe isolat… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/html-output.json` |
| svg-output | registry:component | Component for rendering SVG graphics in notebook outputs. Handles matplotlib figures, diagrams, and other vector graphics with proper scaling. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/svg-output.json` |
| markdown-output | registry:component | Component for rendering Markdown content in notebook outputs. Supports GitHub Flavored Markdown (GFM) with tables, task lists, and syntax-highlighted code bloc… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/markdown-output.json` |
| json-output | registry:component | Component for rendering JSON data in an interactive, expandable tree view. Useful for inspecting complex data structures and API responses. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/json-output.json` |
| media-provider | registry:component | React context provider for shared media rendering configuration. Provides renderers and priority settings to all nested MediaRouter instances. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/media-provider.json` |
| media-router | registry:component | MIME type-based output dispatcher that automatically selects the best renderer for Jupyter outputs. Supports custom renderers and priority ordering for platfor… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/media-router.json` |
| cell-header | registry:component | Slot-based header layout for notebook cells with left/right content areas and optional drag support. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-header.json` |
| cell-type-button | registry:component | Styled buttons for different notebook cell types with color coding. Includes CodeCellButton, MarkdownCellButton, SqlCellButton, and AiCellButton convenience co… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-type-button.json` |
| execution-status | registry:component | A badge component that displays the execution state of a notebook cell. Shows queued, running, or error states. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/execution-status.json` |
| play-button | registry:component | Cell execution control button that shows Play, Stop, or Loading states based on execution state. Used in notebook cell toolbars. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/play-button.json` |
| runtime-health-indicator | registry:component | A visual indicator for kernel connection status. Shows idle, busy, connecting, or disconnected states with color-coded dots. Can display kernel name and option… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/runtime-health-indicator.json` |
| cell-controls | registry:component | Cell action menu with source visibility toggle, move controls, and dropdown menu for delete and clear operations. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-controls.json` |
| cell-container | registry:component | A focus and selection wrapper for notebook cells with gutter ribbon system. Color-coded ribbons indicate cell type, with action area for play button and execut… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-container.json` |
| cell-betweener | registry:component | Spacer component that maintains gutter ribbon continuity between cells. Creates an unbroken 'paper edge' effect down the left side of the notebook. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-betweener.json` |
| output-area | registry:component | Wrapper component for rendering multiple Jupyter outputs with collapsible state and scroll behavior. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/output-area.json` |
| execution-count | registry:component | Displays the classic Jupyter execution count indicator with bracket notation. Shows [ ]: for never executed, [*]: for executing, and [n]: for executed cells. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/execution-count.json` |
| collaborator-avatars | registry:component | Display avatars of users collaborating on a notebook with overflow handling. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/collaborator-avatars.json` |
| presence-bookmarks | registry:component | Shows stacked user avatars indicating who is present on a cell. Displays a HoverCard with user details and a +N overflow indicator when users exceed the limit. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/presence-bookmarks.json` |
| codemirror-editor | registry:component | A CodeMirror 6 editor component for notebook cells with syntax highlighting, key bindings, and language support for Python, IPython (with magics and shell comm… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/codemirror-editor.json` |
| widget-store | registry:lib | Pure React state management for Jupyter widget models. Handles comm_open, comm_msg, and comm_close messages with fine-grained subscriptions via useSyncExternal… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/widget-store.json` |
| anywidget-view | registry:lib | React component for rendering anywidget ESM modules with the AFM (AnyWidget Frontend Module) interface. Handles dynamic ESM loading, CSS injection, and two-way… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/anywidget-view.json` |
| widget-view | registry:lib | Universal widget router that renders Jupyter widgets. Routes anywidgets to ESM loader and standard ipywidgets to built-in shadcn-backed components. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/widget-view.json` |
| widget-controls | registry:component | Built-in shadcn-backed widget components for standard ipywidgets including controls (IntSlider, FloatSlider, IntRangeSlider, FloatRangeSlider, IntProgress, But… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/widget-controls.json` |
| ipycanvas | registry:component | Canvas widget for ipycanvas. Renders an HTML canvas and processes drawing commands sent from Python via the ipycanvas binary protocol. Supports shapes, paths, … | `npx shadcn@latest add https://nteract-elements.vercel.app/r/ipycanvas.json` |
| isolated-frame | registry:component | Secure iframe component for rendering untrusted output content. Uses blob URLs with sandbox restrictions to isolate JavaScript execution. Includes message brid… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/isolated-frame.json` |
| cell-type-selector | registry:component | A dropdown selector for changing cell types in notebook interfaces. Supports filtering available types and displays the current type with color-coded styling. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-type-selector.json` |
| error-boundary | registry:lib | React error boundary with resetKeys support for automatic recovery. Includes OutputErrorFallback and WidgetErrorFallback components for graceful error display … | `npx shadcn@latest add https://nteract-elements.vercel.app/r/error-boundary.json` |
| highlight-text | registry:lib | DOM utility for highlighting search matches in text content with customizable styling. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/highlight-text.json` |
| isolated-renderer | registry:component | Complete isolated iframe renderer bundle for Jupyter outputs and widgets. Runs inside a sandboxed iframe with its own React app, receiving render commands via … | `npx shadcn@latest add https://nteract-elements.vercel.app/r/isolated-renderer.json` |
| all | registry:component | Install all Jupyter frontend components: outputs, cell primitives, widgets, editor, icons, and UI components. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/all.json` |
| global-find-bar | registry:component | Floating search bar for notebook-wide find functionality. Supports keyboard navigation (Enter/Shift+Enter for next/prev, Escape to close). Works with search-hi… | `npx shadcn@latest add https://nteract-elements.vercel.app/r/global-find-bar.json` |
| runtime-icons | registry:component | SVG icons for runtime environments and package managers. Includes DenoIcon, PythonIcon, UvIcon, CondaIcon, and PixiIcon for notebook and onboarding UIs. | `npx shadcn@latest add https://nteract-elements.vercel.app/r/runtime-icons.json` |
| selection-card | registry:component | A stylized selection card component for wizard and onboarding UIs. Includes SelectionCard with icon, title, description, and color-coded selection state, plus … | `npx shadcn@latest add https://nteract-elements.vercel.app/r/selection-card.json` |

## For AI agents

```text
You are adding components from @nteract to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/nteract.md) for the component list.
2. Fetch the machine-readable index: https://nteract-elements.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: nteract).
```