sh4dcnv2 · atlas
← libraries

@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.

35 components react shadcn-cli BSD-3-Clause

Install this registry

shadcn (npm) npx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
pnpm pnpm dlx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
bun bunx shadcn@latest add https://nteract-elements.vercel.app/r/registry.json
fetch registry curl -s https://nteract-elements.vercel.app/r/registry.json

Components

35 total
ANSI Output 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 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 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 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 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 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 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 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
CellHeader 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
CellTypeButton 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
ExecutionStatus 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
PlayButton 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
RuntimeHealthIndicator 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
CellControls 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
CellContainer 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
CellBetweener 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
OutputArea 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
ExecutionCount 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
CollaboratorAvatars 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
PresenceBookmarks 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 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 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 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 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 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 Widget 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 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
CellTypeSelector 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 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 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 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 nteract Components 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 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 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 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