@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.
Install this registry
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 curl -s https://nteract-elements.vercel.app/r/registry.json Components
35 totalComponents 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 Display avatars of users collaborating on a notebook with overflow handling.
npx shadcn@latest add https://nteract-elements.vercel.app/r/collaborator-avatars.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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