Key Value

Displays key-value pairs in a structured format. Ideal for showing object metadata, summaries, or item properties.

ctx.ui.display.keyValue({ data, mode });

Config

An array of key-value pairs to display.

Controls the visual layout of the key-value data:

• "list": vertical stack (default)
• "grid": compact, multi-column layout
• "card": card-style container for each entry with larger text

Usage

Use key-value elements for summarizing object fields or simple structured data.

ctx.ui.page({
  title: "User Profile",
  content: [
    ctx.ui.display.keyValue({
      mode: "grid",
      data: [
        { key: "Name", value: "Jane Doe" },
        { key: "Age", value: 32 },
        { key: "Member since", value: new Date("2020-01-15") },
        { key: "Active", value: true },
      ],
    }),
  ],
});