CellHeader
Slot-based header layout for notebook cells with left/right content areas
Code
A flexible header component for notebook cells that provides left and right content slots. Supports optional drag-and-drop functionality for cell reordering.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-header.jsonCopy from nteract/elements.
Usage
import { CellHeader } from "@/registry/cell/CellHeader"
export function MyCell() {
return (
<CellHeader
leftContent={<span>Cell [1]</span>}
rightContent={<button>Run</button>}
/>
)
}Examples
Basic Header
Code
<CellHeader
leftContent={<Badge variant="secondary">Code</Badge>}
rightContent={<Button variant="ghost" size="sm">Run</Button>}
/>With Drag Support
Markdown
Drag me<CellHeader
draggable
onDragStart={(e) => {
e.dataTransfer.effectAllowed = "move";
// Set your drag data here
}}
leftContent={<Badge>Markdown</Badge>}
rightContent={<span>Drag me</span>}
/>With Custom Styling
SQL
<CellHeader
className="bg-muted/50"
leftContent={<Badge variant="outline">SQL</Badge>}
rightContent={<Button variant="secondary" size="sm">Execute</Button>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
leftContent | ReactNode | — | Content displayed on the left side of the header |
rightContent | ReactNode | — | Content displayed on the right side of the header |
className | string | — | Additional CSS classes |
draggable | boolean | — | Whether the header can be dragged |
onDragStart | (e: React.DragEvent) => void | — | Callback when drag starts |
onKeyDown | (e: React.KeyboardEvent) => void | — | Keyboard event handler |