Skip to main content

cardPopup

Custom popup component rendered on card click instead of the sidebar editor. Clicking or pressing Enter/Space on a card opens this component in an anchored popup.

Usage​

cardPopup?: Component;

The component receives two props:

PropTypeDescription
cardKanbanCardThe card object that was clicked
close() => voidCallback that dismisses the popup

When set, all card clicks and keyboard activations open the popup. The sidebar Editor only opens through programmatic api.exec("select-card", { id }) calls or other UI paths (e.g., the card context menu).

Positioned at "right-start" relative to the clicked card. Dismissed by outside click or Escape. Only one popup is open at a time.

Example​

import { Kanban } from "@svar-ui/react-kanban";
import CardPreview from "./CardPreview.jsx";

const columns = [
  { id: "new", label: "New" },
  { id: "in-progress", label: "In Progress" },
];
const cards = [
  { id: 1, label: "Task A", column: "new" },
  { id: 2, label: "Task B", column: "in-progress" },
];

export default function App() {
  return <Kanban cards={cards} columns={columns} cardPopup={CardPreview} />;
}

The CardPreview component:

export default function CardPreview({ card, close }) {
  return (
    <div className="preview">
      <h4>{card.label}</h4>
      <button onClick={close}>Close</button>
    </div>
  );
}

Combining the popup with the sidebar editor - dispatch select-card and call close from inside the popup:

import { useState } from "react";
import { Kanban, Editor } from "@svar-ui/react-kanban";
import CardPreview from "./CardPreview.jsx";

export default function App() {
  const [api, setApi] = useState(null);

  return (
    <>
      <Kanban
        cards={cards}
        columns={columns}
        cardPopup={CardPreview}
        init={a => setApi(a)}
      />
      {api && <Editor api={api} />}
    </>
  );
}
  • Card popup guide - setup, component contract, and editor coexistence
  • tooltip - passive hover tooltip (non-interactive)
  • select-card - programmatic editor opening from within the popup
  • Editor - the sidebar/modal editor the popup can coexist with