RuntimeHealthIndicator

A component that displays kernel connection status with color-coded indicators. Shows one of four states: idle (green), busy (amber), connecting (blue), or disconnected (red). Optionally displays the kernel name and can function as a clickable button.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/runtime-health-indicator.json

Copy from nteract/elements.

Usage

import { RuntimeHealthIndicator } from "@/registry/cell/RuntimeHealthIndicator"

export function NotebookToolbar() {
  return (
    <RuntimeHealthIndicator
      status="idle"
      kernelName="Python 3"
      onClick={() => openKernelSelector()}
    />
  )
}

Examples

Status Variants

Connected

Busy

Connecting...

Disconnected

<RuntimeHealthIndicator status="idle" showStatus />
<RuntimeHealthIndicator status="busy" showStatus />
<RuntimeHealthIndicator status="connecting" showStatus />
<RuntimeHealthIndicator status="disconnected" showStatus />

With Kernel Name

<RuntimeHealthIndicator status="idle" kernelName="Python 3" onClick={handleClick} />
<RuntimeHealthIndicator status="busy" kernelName="Julia 1.10" onClick={handleClick} />
<RuntimeHealthIndicator status="idle" kernelName="R" onClick={handleClick} />

Indicator Only

<RuntimeHealthIndicator status="idle" />
<RuntimeHealthIndicator status="busy" />
<RuntimeHealthIndicator status="connecting" />
<RuntimeHealthIndicator status="disconnected" />

Full Display

<RuntimeHealthIndicator
  status="idle"
  kernelName="Python 3"
  showStatus
  onClick={() => openKernelSelector()}
/>

Props

Prop	Type	Default	Description
`status`	`"idle" \| "busy" \| "disconnected" \| "connecting"`	—	Current kernel connection status
`kernelName`	`string`	—	Name of the kernel to display
`onClick`	`() => void`	—	Callback when clicked (renders as button when provided)
`showStatus`	`boolean`	`false`	Whether to show status text
`className`	`string`	—	Additional CSS classes

Exports

The component also exports utility functions for customization:

import {
  RuntimeHealthIndicator,
  getStatusColor,
  getStatusText,
  getStatusTextColor,
  type RuntimeStatus
} from "@/registry/cell/RuntimeHealthIndicator"

// Get the Tailwind color class for a status
getStatusColor("idle") // "text-green-500"

// Get the display text for a status
getStatusText("connecting") // "Connecting..."

RuntimeHealthIndicator

On this page