nteract elements
React components for building notebook interfaces
Welcome to nteract elements
A design system for building notebook interfaces with React.
Edit the code above and click [▶]: to see it render.
React components for notebook interfaces. Use shadcn/ui patterns — copy into your repo and customize freely.
What's Available
Cells
15 components for code cells, markdown, execution UI, and cell controls
Outputs
9 renderers for ANSI, HTML, images, JSON, SVG, and media routing
Widgets
50+ interactive controls with full Jupyter widget protocol support
Editor
CodeMirror integration with Jupyter keybindings
Used By
Powers runt — a desktop notebook editor built with Tauri.
Why nteract elements?
Pure React Architecture
No Backbone.js, no JupyterLab dependencies. State management uses useSyncExternalStore for concurrent-safe React 18/19 support. Fine-grained subscriptions prevent unnecessary re-renders.
shadcn/ui Patterns
Components copy into your repo. Override any component. Theme with Tailwind CSS variables. Works with your existing design system.
Full Widget Support
50+ built-in controls covering sliders, buttons, dropdowns, progress bars, date pickers, file uploads, layout containers, and more. Plus full anywidget ESM support for custom widgets.
| Traditional Jupyter | nteract elements |
|---|---|
| Backbone.js models | Pure React with useSyncExternalStore |
| JupyterLab styling | shadcn/ui primitives (fully customizable) |
| Monolithic manager | Modular: pick only what you need |
Installation
Add nteract to your shadcn registry:
pnpm dlx shadcn@latest registry add @nteractThis configures your components.json with the @nteract registry. Then install any component:
npx shadcn@latest add @nteract/media-router
npx shadcn@latest add @nteract/cell-containerDirect URL
Install directly without registry configuration:
npx shadcn@latest add https://nteract-elements.vercel.app/r/media-router.jsonOutput Renderers
ANSI Output
Render ANSI escape sequences as colored terminal output
Image Output
Render images from base64 data or URLs
HTML Output
Render HTML content like pandas DataFrames
SVG Output
Render SVG graphics and vector images
Markdown Output
Render Markdown with GFM and syntax highlighting
JSON Output
Render JSON in an interactive tree view
Media Router
Auto-select renderer based on MIME type
Work in Progress — We're bringing the nteract components out of hibernation and into the future with shadcn. More components coming soon!