Cell Components

print("Hello, World!")

The cell components create notebook cell interfaces with a classic [n]: execution count. Click to run, hover to see controls.

Paper Margins Layout

CellContainer uses a paper margins design with symmetric gutters:

┌──────────────────────────────────────────────────────────┐
│ Left    │                                    │   Right   │
│ Margin  │         Content Area               │   Margin  │
├─────────┼────────────────────────────────────┼───────────┤
│[▶]:│▮│  │ Source code                        │     [⋮]   │
│    │▮│  │ print("Hello")                     │           │
│    │▮│  │                                    │           │
│    │▮│  ├────────────────────────────────────┤           │
│    │▮│  │ Output: Hello                      │           │
└────┴─┴──┴────────────────────────────────────┴───────────┘
  ^    ^                                            ^
  │    └── ribbon (colored by cell type)            │
  │                                                 └── controls (hover/focus)
  └── [n]: execution count (click to run)

Left margin: [n]: execution count with integrated play button, colored ribbon
Content: Clean "paper" with source and output
Right margin: Cell controls (visible on hover/focus)

Usage

Use CompactExecutionButton for the classic Jupyter [n]: style:

import { CellContainer } from "@/components/cell/CellContainer";
import { CompactExecutionButton } from "@/components/cell/CompactExecutionButton";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { MoreVertical } from "lucide-react";

function NotebookCell({ cell, isFocused, onFocus }) {
  return (
    <CellContainer
      id={cell.id}
      cellType={cell.type}
      isFocused={isFocused}
      onFocus={onFocus}
      gutterContent={
        cell.type === "code" ? (
          <CompactExecutionButton
            count={cell.executionCount}
            isExecuting={cell.executionState === "running"}
            onExecute={() => executeCell(cell.id)}
            onInterrupt={() => interruptCell(cell.id)}
          />
        ) : undefined
      }
      rightGutterContent={
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
              <MoreVertical className="h-3 w-3" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => deleteCell(cell.id)}>Delete cell</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      }
    >
      <CodeEditor value={cell.source} />
      {cell.outputs.map(output => <OutputRenderer output={output} />)}
    </CellContainer>
  );
}

The CompactExecutionButton shows:

[▶]: before first run - click to execute
[■]: while running (pulsing) - click to stop
[1]: after execution - hover shows play, click to re-run

Multiple Cells

Click different cells to see focus behavior:

x = 1

y = 2

print(x + y)

Ribbon Colors

Cell Type	Ribbon Color (focused)
`code`	Sky blue
`markdown`	Emerald
`sql`	Blue
`ai`	Purple
`raw`	Rose

Custom colors can be provided via customGutterColors prop.

Segmented Ribbon Layout

For cells with separate code and output sections, use codeContent and outputContent props instead of children. This creates a segmented ribbon with distinct colors for each section:

┌─────────────────────────────────────────┐
│ [gutter] │ code ribbon   │ codeContent  │
│          │───────────────│──────────────│
│          │ output ribbon │ outputContent│
└─────────────────────────────────────────┘

Code ribbon: Cell type color (e.g., sky blue for code)
Output ribbon: Gradient variation of cell type color
Output opacity: 70% when cell is unfocused

print("Hello, world!")

Hello, world!

<CellContainer
  cellType="code"
  isFocused={isFocused}
  codeContent={<CodeEditor value={source} />}
  outputContent={<OutputArea outputs={outputs} />}
/>

Hide Output

Use hideOutput to invisibly hide the output section (useful for preloading iframes):

<CellContainer
  cellType="code"
  codeContent={<CodeEditor value={source} />}
  outputContent={<OutputArea outputs={outputs} preloadIframe />}
  hideOutput={outputs.length === 0}  // Hide until outputs arrive
/>

Installation

npx shadcn@latest add @nteract/cell-container
npx shadcn@latest add @nteract/compact-execution-button
npx shadcn@latest add @nteract/play-button
npx shadcn@latest add @nteract/execution-count

New to @nteract? pnpm dlx shadcn@latest registry add @nteract

Copy from nteract/elements.

Component Reference

CellContainer

The outer wrapper with gutter ribbon and focus styling.

Unfocused code cell

Focused code cell

Focused markdown cell (emerald ribbon)

Prop	Type	Default	Description
`id`	`string`	—	Cell identifier for `data-cell-id`
`cellType`	`string`	required	Cell type for ribbon coloring
`isFocused`	`boolean`	`false`	Shows focus styling when true
`onFocus`	`() => void`	—	Called on mousedown
`children`	`ReactNode`	—	Cell content (legacy, use codeContent/outputContent for segmented ribbon)
`codeContent`	`ReactNode`	—	Code/editor section content (enables segmented ribbon)
`outputContent`	`ReactNode`	—	Output section content (renders with different ribbon color)
`hideOutput`	`boolean`	`false`	Hide output section (useful for preloading)
`gutterContent`	`ReactNode`	—	Left margin content (e.g., CompactExecutionButton)
`rightGutterContent`	`ReactNode`	—	Right margin content (e.g., controls, kebab menu)
`customGutterColors`	`Record<string, GutterColorConfig>`	—	Custom ribbon colors
`onDragStart`	`(e: DragEvent) => void`	—	Enables dragging when provided
`onDragOver`	`(e: DragEvent) => void`	—	Drag over handler
`onDrop`	`(e: DragEvent) => void`	—	Drop handler
`className`	`string`	—	Additional classes

CompactExecutionButton

Combines play button + execution count into one [n]: element.

Prop	Type	Default	Description
`count`	`number \| null`	—	Execution count (null = never executed)
`isExecuting`	`boolean`	`false`	Shows stop icon with pulse when true
`onExecute`	`() => void`	—	Run callback
`onInterrupt`	`() => void`	—	Stop callback
`className`	`string`	—	Additional classes

PlayButton

Execute/interrupt button with state-based icons. Use gutterMode when placing in the gutter.

Idle

Running

Prop	Type	Description
`executionState`	`"idle" \| "queued" \| "running" \| "completed" \| "error"`	Current state
`cellType`	`string`	For tooltip text
`isFocused`	`boolean`	Highlight when focused
`onExecute`	`() => void`	Run callback
`onInterrupt`	`() => void`	Stop callback
`gutterMode`	`boolean`	Smart visibility for gutter (hidden unfocused, visible on focus/hover)

ExecutionCount

Displays [n]: execution count badge.

Prop	Type	Description
`count`	`number \| null`	Execution count (null shows empty brackets)
`isExecuting`	`boolean`	Shows `[*]:` when true
`className`	`string`	Additional classes

CellTypeButton

Color-coded button showing cell type.

Prop	Type	Default	Description
`cellType`	`"code" \| "markdown" \| "sql" \| "ai"`	—	Cell type
`showIcon`	`boolean`	`true`	Show type icon
`showPlus`	`boolean`	`false`	Show + icon (for add buttons)
`label`	`string`	—	Custom label

Cell Components

On this page