CellTypeSelector

A dropdown selector for changing cell types. Displays the current type with color-coded styling and allows users to switch between available types.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/cell-type-selector.json

Copy from the nteract/elements registry.

Requires the Button, DropdownMenu, and CellTypeButton components from the nteract registry.

Usage

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

export function Example() {
  const [cellType, setCellType] = useState<CellType>("code")

  return (
    <CellTypeSelector
      currentType={cellType}
      onTypeChange={setCellType}
    />
  )
}

All Cell Types

The selector shows all cell types by default:

<CellTypeSelector
  currentType="code"
  onTypeChange={(type) => console.log(type)}
/>

Limited Types

Restrict available types using the enabledTypes prop:

<CellTypeSelector
  currentType="code"
  onTypeChange={(type) => console.log(type)}
  enabledTypes={["code", "markdown"]}
/>

Props

Prop	Type	Default	Description
`currentType`	`CellType`	Required	The currently selected cell type
`onTypeChange`	`(type: CellType) => void`	Required	Callback when the type changes
`enabledTypes`	`CellType[]`	All types	Types available in the dropdown

Types

type CellType = "code" | "markdown" | "sql" | "ai";

interface CellTypeSelectorProps {
  currentType: CellType;
  onTypeChange: (type: CellType) => void;
  enabledTypes?: CellType[];
}